threejs-r3flisted

# Three.js & React Three Fiber > 3D on the web. Three.js is the engine, R3F is the React renderer. > Concise rules here. Deep-dive in `references/`. --- ## When to Use What | Need | Tool | Why | |---|---|---| | Full 3D scene (models, lights, physics) | R3F + drei | Declarative, React-friendly, ecosystem | | Vanilla 3D (no React) | Three.js direct | Lighter, no React overhead | | Simple 3D transforms on UI | CSS `transform3d` | GPU-composited, no WebGL context | | 2D particles / generative | Canvas 2D | Simpler API, less GPU overhead | | Shader-only visuals (no scene graph) | Raw WebGL / ShaderMaterial | Maximum control, minimal abstraction | --- ## Scene Setup Patterns ```tsx import { Canvas } from '@react-three/fiber' import { Environment, OrbitControls } from '@react-three/drei' import { Suspense } from 'react' <Canvas camera={{ position: [0, 2, 5], fov: 45 }} dpr={[1, 2]} gl={{ antialias: true }}> <Suspense fallback={null}> <Environment preset="studio" /> <OrbitControls makeDefault /> <Scene /> </Suspense> </Canvas> ``` **Rules:** - Always wrap scene content in `<Suspense>` -- loaders (GLTF, textures, HDRI) need it - Set `dpr={[1, 2]}` to clamp pixel ratio (Retina without melting GPUs) - Keep the Canvas parent component minimal -- re-renders propagate into the scene --- ## R3F Hooks | Hook | Purpose | Gotcha | |---|---|---| | `useFrame((state, delta) => {})` | Per-frame logic (animation, physics) | Never setState inside | | `useThree()` | Access