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 })
  

• Performance-Tools aus drei: <Stats />, <Perf />, <Bvh /> für Hit-Tests.

Gotchas / Was oft schiefgeht

• <Canvas> in Next.js: muss "use client", Dynamic-Import mit { ssr: false }.
• Camera/Renderer-Props nach Init geändert → werden ignoriert; via Ref oder <Canvas key> neu mounten.
• Events im Three-Space sind raycasted — performance-kritisch bei vielen Meshes. <Bvh> aus drei beschleunigt.
• dispose() macht R3F automatisch bei Unmount — kein manuelles Cleanup für Standard-Cases.
• State-Updates in useFrame triggern Re-Render → Performance-Killer. Mutationen direkt auf Refs.

Wann nicht?

Wenn dein Code zu 100% imperativ Three-Logik ist (Game-Engine-mäßig) → reines Three.js. Sehr custom Render-Pipelines → Three direkt mit eigener Loop.