Genarrative/.hermes/plugins/game-studio/references/react-three-fiber-starter.md

React Three Fiber Starter

Use this as the smallest canonical starting point for a React-hosted 3D scene.

Files

src/
  App.tsx

src/App.tsx

import { Canvas } from "@react-three/fiber";

function Spinner() {
  return (
    <mesh rotation={[0.4, 0.6, 0]}>
      <boxGeometry args={[1, 1, 1]} />
      <meshStandardMaterial color="#3dd9b8" />
    </mesh>
  );
}

export default function App() {
  return (
    <div className="app-shell">
      <Canvas camera={{ position: [0, 1.5, 4], fov: 60 }}>
        <color attach="background" args={["#101418"]} />
        <ambientLight intensity={0.7} />
        <directionalLight position={[4, 6, 3]} intensity={1.2} />
        <Spinner />
      </Canvas>
      <div className="hud">
        <div className="objective-chip">Reach the lantern bridge.</div>
        <div className="hint-pill">WASD to move. Hold mouse to look.</div>
      </div>
    </div>
  );
}

Notes

• Start here when the 3D scene lives inside an existing React app.
• Keep the initial HUD sparse. One compact objective surface and one transient hint is usually enough for a first playable scaffold.
• Put lore, notes, map, and settings behind drawers or modals instead of opening them all by default.
• Add GLB loading with gltf-loading-starter.md.
• Add physics with rapier-integration-starter.md.
• Use three-hud-layout-patterns.md for low-chrome 3D overlay defaults.