React Three Fiber

Was ist es?

React Three Fiber (R3F) ist der React-Renderer für Three.js — du baust 3D-Szenen als JSX-Komponenten, R3F reconcilt das auf den Three-Scene-Graph. Alles, was in Three geht, geht in R3F.

Quickstart

pnpm add three @react-three/fiber @react-three/drei

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

export default function Scene() {
  return (
    <Canvas camera={{ position: [3, 3, 3] }}>
      <ambientLight intensity={0.5} />
      <mesh>
        <boxGeometry />
        <meshStandardMaterial color="hotpink" />
      </mesh>
      <OrbitControls />
    </Canvas>
  )
}

Typische Patterns

• @react-three/drei für 90% der Three-Helper (Loader, Controls, Shaders, Environment, Text).
• useFrame((state, delta) => {...}) für Per-Frame-Updates — niemals useEffect für Animationen.
• useGLTF + useTexture mit Suspense für Asset-Loading.
• Refs auf Three-Objekte:

  const ref = useRef<THREE.Mesh>(null!)
  useFrame(() => { ref.current.rotation.y += 0.01 })