React Three Fiber Setup

When to Use

Use this skill when:

• Building React Three.js applications
• Setting up a new R3F project
• Integrating Three.js with React components
• Creating declarative 3D scenes
• Building mobile-responsive 3D apps

Core Principles

1. Declarative: Define scenes with JSX, not imperative code
2. Component-Based: Reusable 3D components
3. React Integration: Use hooks, context, state naturally
4. Performance: Automatic disposal, frame loop optimization
5. TypeScript: Full type safety for Three.js objects