React Three Fiber Patterns

Quick Guide: R3F is a React reconciler for Three.js, so the React tree is the scene graph and every Three.js class is a camelCase JSX element — <mesh>, <boxGeometry>, <meshStandardMaterial>. <Canvas> creates the renderer, scene and camera, and every R3F hook must be called inside it. Per-frame work goes through useFrame mutating refs, never through state; structural changes go through state as usual. Assets load through useLoader/useGLTF, which suspend, so their components need a <Suspense> boundary. Pointer events raycast into the scene and reach occluded objects unless stopPropagation() is called.

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

Detailed Resources:

• examples/core.md — Canvas setup, lighting rigs, useFrame animation, asset loading, drei helpers, physics
• examples/interaction.md — the event object, propagation, hover, click-versus-drag, pointer capture, the full event list
• examples/performance.md — instancing, LOD, on-demand rendering, resource sharing, disposal, adaptive quality
• reference.md — Canvas props, hook signatures, the event type, ecosystem packages, Three.js-to-JSX mapping, collider types

<critical_requirements>

Before writing React Three Fiber code