Recipe

React Three Fiber Basics

Render declarative 3D scenes inside React without leaving the component tree.

Setup

npm install three @react-three/fiber @react-three/drei

Minimal Canvas

import { Canvas } from '@react-three/fiber'

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.5} />
      <pointLight position={[10, 10, 10]} />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="#8B5CF6" />
      </mesh>
    </Canvas>
  )
}

Key Concepts

▸Canvas — mounts the WebGL renderer and sets up the scene context.
▸Imperative handles — use useRef and useFrame for per-frame updates.
▸Drei helpers — OrbitControls, Environment, and Text from @react-three/drei accelerate prototyping.

Next Steps

Physics with Rapier →Custom Shaders →