react-three-fiber

Use React Three Fiber's Canvas component to set up the scene, camera, and renderer, then declare Three.js objects as JSX elements like mesh, boxGeometry, and meshStandardMaterial. Props like position and rotation map directly to Three.js object properties.

Use the useFrame hook to run code on every frame, mutating object refs directly for rotation or position changes. Never call setState inside useFrame since it triggers unnecessary React re-renders each frame.

Use useLoader with GLTFLoader or Drei's useGLTF hook, wrapped in a Suspense boundary for async loading. Models are automatically cached, and you can preload them with useGLTF.preload before components mount.

Yes, React Three Fiber works with React frameworks including Next.js, Gatsby, and Remix. The scene setup script includes framework options for Next.js and Vite project structures.

This happens when setState is called inside useFrame or when useThree subscribes to the entire state object. Mutate refs directly in useFrame and use selective subscriptions like useThree((state) => state.size).

Use instancedMesh with setMatrixAt to render many identical objects efficiently in a single draw call. Combine with AdaptiveDpr, frameloop="demand", and LOD via Drei's Detailed component for further optimization.