react-three-fiber-setup

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

Implementation

1. Project Setup

# Create new React project with TypeScript
npm create vite@latest my-game -- --template react-ts
cd my-game

# Install R3F and dependencies
npm install three @react-three/fiber @react-three/drei
npm install --save-dev @types/three

# Optional: Additional R3F ecosystem
npm install @react-three/postprocessing zustand

2. Basic Canvas Setup

// App.tsx
import { Canvas } from '@react-three/fiber';
import { Suspense } from 'react';
import './App.css';

function App() {
  return (
    <div className="app-container">
      <Canvas
        camera={{
          position: [0, 5, 10],
          fov: 75,
          near: 0.1,
          far: 1000,
        }}
        shadows
        gl={{
          antialias: true,
          alpha: false,
          powerPreference: 'high-performance',
        }}
        dpr={[1, 2]} // Pixel ratio: min 1, max 2
        performance={{
          min: 0.5, // Min FPS threshold (30fps)
        }}
      >
        <Suspense fallback={null}>
          <Scene />
        </Suspense>
      </Canvas>
    </div>
  );
}

export default App;

/* App.css */
.app-container {
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
  overflow: hidden;
  touch-action: none; /* Prevent default touch behaviors */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}