Version-sensitive. Every API name, SDK gate and browser-support claim below was verified on 2026-09-08 against primary sources. What against, and when, is in _jutsu/VERSIONS.md. If that date is old, re-verify before acting on a version number.

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/.

Versions: three r187 (0.187.x) · @react-three/fiber 9.x · @react-three/drei 10.x · @react-three/postprocessing 3.x. R3F 9 is React 19 only - its declared peer range is react / react-dom >=19 <19.4 (drei 10 asks ^19). React 18 projects must stay on R3F 8 + drei 9. Check the installed React major before scaffolding. Renderers: WebGLRenderer is still R3F's default. WebGPURenderer + TSL is shipped (not flagged) and self-falls-back to WebGL 2, but three's docs call it "the new alternative of WebGLRenderer", not the default. Opt in with an async gl callback:

import * as THREE from 'three/webgpu'
<Canvas gl={async (props) => { const r = new THREE.WebGPURenderer(props as any); await r.init(); return r }} />

---

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'