What problem does it solve? Building 3D scenes in React with React Three Fiber often leads to subtle bugs: mixing imperative Three.js code with R3F's declarative model, allocating objects inside useFrame, forgetting Suspense boundaries for loaders, and causing unnecessary re-renders. This Skill provides the correct patterns, API references, and anti-patterns to avoid these mistakes. ## Core Features & Use Cases - Complete API Reference: Covers Canvas props, useFrame, useThree, useLoader, useGraph, extend(), createPortal, and the full pointer event system with TypeScript signatures. - Anti-Pattern Catalog: Documents eight common mistakes (object creation in useFrame, missing Suspense, selector-less useThree, imperative scene.add, primitive duplication, disposal of shared resources, hardcoded timesteps, missing invalidate calls) with wrong/correct code pairs. - Working Examples: Provides verified code for animated meshes, GLTF loading with Suspense, demand-mode rendering, custom controls via extend(), and portal-based minimaps. - Use Case: When building a product configurator with a 3D model viewer in React, use this Skill to correctly load GLTF assets, wire up OrbitControls, and use frameloop="demand" with invalidate() to avoid wasting GPU cycles on a static scene. ## Quick Start Use the threejs-impl-react-three-fiber skill to build a React Three Fiber scene with a spinning box and a loaded GLTF model wrapped in Suspense.
