react-three-fiber-patterns

What problem does it solve? Writing Three.js scenes imperatively inside React leads to verbose boilerplate, manual lifecycle management, and hard-to-maintain rendering code. This Skill provides proven patterns for composing 3D scenes declaratively with react-three-fiber, so meshes, lights, cameras, and animations behave like ordinary React components. ## Core Features & Use Cases - Declarative Scene Composition: Set up Canvas, lighting, cameras, OrbitControls, and environments with JSX instead of imperative Three.js setup code. - Performance Patterns: Use InstancedMesh for thousands of particles, useFrame with delta time, and useMemo to avoid recreating geometry every render. - Animation & Shaders: Integrate react-spring or GSAP for animation, and write custom GLSL shader materials via drei's shaderMaterial helper. - Use Case: A developer building a product landing page wants an interactive rotating 3D model with floating particles and a distortion material. This Skill supplies the exact component patterns, drei helpers (Float, Sparkles, MeshDistortMaterial), and performance guidance to implement it. ## Quick Start Ask the AI to create a react-three-fiber scene with a spinning box, orbit controls, and a sunset environment using the patterns from this Skill.