React Three Fiber: 3D, deklarativ gedacht

Lange habe ich Three.js so geschrieben, wie es die Bibliothek vorgibt: imperativ. Szene erstellen, Kamera positionieren, Mesh hinzufügen, in der Render-Schleife alles von Hand aktualisieren. Es funktioniert — aber jedes größere Projekt wurde zu einem Knäuel aus Zustand, das niemand mehr entwirren wollte. Mit React Three Fiber hat sich das gedreht.

Von Befehlen zu Beschreibung

React Three Fiber, kurz R3F, lässt mich eine 3D-Szene so ausdrücken, wie ich sonst eine Benutzeroberfläche baue: als Baum aus Komponenten. Statt ein Mesh zu instanziieren und manuell an die Szene zu hängen, schreibe ich einfach, was da sein soll.

<mesh position={[0, 1, 0]}>
  <boxGeometry args={[1, 1, 1]} />
  <meshStandardMaterial color="hotpink" />
</mesh>

Das ist kein Spielzeug-Layer über Three.js — es ist Three.js, nur deklarativ. Jede Three-Klasse wird zur Komponente, jede Eigenschaft zur Prop. Der entscheidende Unterschied: Ich beschreibe den Zustand, den ich haben will, und R3F gleicht die Szene dafür ab. Genau das Prinzip, das React im DOM so stark gemacht hat, gilt nun für den Canvas.

Warum das kreative Arbeit verändert

Wartbarkeit ist kein Gegensatz zu Kreativität — sie ist die Voraussetzung dafür, mutig zu bleiben.

Der eigentliche Gewinn ist nicht weniger Code, sondern weniger Angst vor Veränderung. Wenn eine Szene aus klar benannten Komponenten besteht, kann ich eine Idee austauschen, ohne den Rest zu fürchten. Das Ökosystem hilft enorm: Mit @react-three/drei habe ich Kameras, Steuerungen und Loader griffbereit, und Hooks wie useFrame binden Animationen sauber an den Render-Zyklus — ohne globale Schleife, die alles kennt.

Für mich heißt das: Ich kann eine 3D-Idee schnell skizzieren, im Team teilen und Wochen später weiterbauen, ohne erst zu archäologieren, was ich mir damals gedacht habe. Three.js gibt mir die Tiefe, R3F gibt mir die Struktur. Deklaratives 3D ist für mich kein Trend, sondern die Art, wie kreative Webarbeit endlich auch über die erste Demo hinaus trägt.