threejs-r3f

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

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 gl, scene, camera, size, viewport, pointer	Destructure only what you need
useLoader(TextureLoader, url)	Load any Three.js resource	Wrap parent in Suspense
useGraph(scene)	Extract nodes/materials from loaded scene	Useful after useGLTF

useFrame Tips

useFrame((state, delta) => {
  // Use delta for framerate-independent animation
  meshRef.current.rotation.y += delta * 0.5
  // Access clock for time-based effects
  material.uniforms.uTime.value = state.clock.elapsedTime
})

---

Drei Essentials

Component	Use Case
Environment	HDRI lighting (presets: studio, sunset, city, forest, dawn)
Float	Idle floating animation (speed, rotationIntensity, floatIntensity)
Text3D	Extruded 3D text (needs JSON font from Facetype.js)
useGLTF	Load .glb/.gltf models (returns { nodes, materials, scene })
useGLTF.preload(url)	Preload model before component mounts
MeshTransmissionMaterial	Glass/crystal/liquid refraction effects
PresentationControls	Drag-to-rotate for product showcases
Center	Auto-center any group of meshes
Detailed	LOD -- swap geometry by camera distance
useTexture	Load textures with Suspense support
Instances	Declarative instancing for repeated meshes

---

Postprocessing

import { EffectComposer, Bloom, ChromaticAberration } from '@react-three/postprocessing'
import { BlendFunction } from 'postprocessing'

<EffectComposer>
  <Bloom
    luminanceThreshold={1}
    luminanceSmoothing={0.4}
    intensity={0.6}
  />
  <ChromaticAberration
    blendFunction={BlendFunction.NORMAL}
    offset={[0.002, 0.002]}
  />
</EffectComposer>

Rules:

• Bloom is selective by default -- lift material color/emissive above 1.0 to make it glow
• luminanceThreshold={1} = nothing glows unless explicitly emissive
• Order matters inside EffectComposer
• Effects are merged into a single pass (performant by design)

---

Performance Patterns

Pattern	When
<Instances> / InstancedMesh	100+ identical meshes (particles, trees, crowds)
<Detailed distances={[0, 50, 100]}>	LOD: swap hi/lo models by distance
dispose={null} on <primitive>	Prevent auto-dispose when reusing shared geometry
useGLTF + Draco	Compress .glb models (70-90% size reduction)
useTexture + KTX2	Compressed GPU textures (1/4 VRAM)
frameloop="demand" on Canvas	Only render when something changes (static scenes)
invalidate() from useThree	Trigger a render in demand mode
Offscreen canvas (<Canvas eventSource={...}>)	Run rendering off main thread

Target metrics: < 100 draw calls, < 1M triangles, 60fps on mid-range GPU. Use stats-gl or r3f-perf to monitor.

---

Do Not

1. Never setState in useFrame

Causes full React re-render 60x/second. Mutate refs directly.

// BAD
useFrame(() => {
  setRotation(prev => prev + 0.01) // React re-render every frame
})

// GOOD
useFrame((_, delta) => {
  meshRef.current.rotation.y += delta * 0.5 // Direct mutation, zero re-renders
})

2. Never allocate in the render loop

new Vector3() per frame = GC spikes = stutter.

// BAD
useFrame((state) => {
  const target = new THREE.Vector3(0, Math.sin(state.clock.elapsedTime), 0)
  meshRef.current.position.copy(target)
})

// GOOD
const _target = useMemo(() => new THREE.Vector3(), [])
useFrame((state) => {
  _target.set(0, Math.sin(state.clock.elapsedTime), 0)
  meshRef.current.position.copy(_target)
})

3. Never forget dispose (memory leak)

Three.js textures, geometries, and materials live on the GPU. Unmounting a React component does NOT free them.

// BAD -- texture stays in VRAM after unmount
const texture = useLoader(TextureLoader, '/big-texture.jpg')

// GOOD -- R3F auto-disposes when using JSX primitives
// For manual resources, dispose in cleanup:
useEffect(() => {
  return () => {
    texture.dispose()
    geometry.dispose()
    material.dispose()
  }
}, [])

4. Never re-render the Canvas parent

State changes in the parent force the entire Canvas to remount = flash, lost state, reloaded assets.

// BAD
function App() {
  const [uiState, setUiState] = useState(false) // re-renders remount Canvas
  return (
    <>
      <button onClick={() => setUiState(!uiState)}>Toggle</button>
      <Canvas><Scene config={uiState} /></Canvas>
    </>
  )
}

// GOOD -- isolate Canvas in its own component
function App() {
  return (
    <>
      <UI />
      <SceneCanvas />
    </>
  )
}

5. Never load assets without Suspense

Loaders (useGLTF, useTexture, useLoader) throw promises. Without Suspense, you get crashes.

// BAD
<Canvas>
  <Model /> {/* useGLTF inside -- will throw */}
</Canvas>

// GOOD
<Canvas>
  <Suspense fallback={<Loader />}>
    <Model />
  </Suspense>
</Canvas>

---

Quick Reference: Loading Sub-resources

Need	Load
Scene boilerplate, lighting rigs, controls	references/scene-setup.md
Custom shaders, GLSL patterns, uniforms	references/shaders.md
Animation principles, easing, timing	../motion-principles/SKILL.md
GSAP + Three.js integration	../gsap/SKILL.md