React Three Fiber Patterns

Quick Guide: R3F is a React renderer for Three.js. Every Three.js class maps to a JSX element (<mesh>, <boxGeometry>, <meshStandardMaterial>). Use <Canvas> for scene setup, useFrame for per-frame logic (never setState inside it), useRef for direct mutations, and useLoader/useGLTF for assets. Animate via refs in useFrame, not React state. Events work like DOM events with raycasting built in. Wrap exiting 3D components in <Suspense> for async asset loading.

Import: import { Canvas, useFrame, useThree, useLoader } from "@react-three/fiber"

<critical_requirements>

CRITICAL: Before Using This Skill

All code must follow project conventions in CLAUDE.md (kebab-case, named exports, import ordering, import type, named constants)

(You MUST never call setState inside useFrame -- mutate refs directly for per-frame updates)

(You MUST wrap <Canvas> children that load assets in <Suspense> boundaries)

(You MUST reuse geometries and materials across meshes -- creating new instances per mesh wastes GPU memory)