Beschreibung
React Three Fiber, kurz R3F, bindet die JavaScript-3D-Bibliothek Three.js als React-Renderer ein. Statt Szenen imperativ über die Three.js-API aufzubauen, werden sie deklarativ in JSX geschrieben: Ein <mesh> wird intern zu new THREE.Mesh(), jedes Three.js-Objekt lässt sich damit als selbstständige, wiederverwendbare React-Komponente ausdrücken, die auf State reagiert und interaktiv auf Klicks oder Hover reagieren kann. Die Komponenten rendern dabei außerhalb des React-DOM direkt in den WebGL-Kontext, sodass Hooks wie useFrame für den Render-Loop oder useRef für den direkten Zugriff auf das darunterliegende Three.js-Objekt zur Verfügung stehen.
Voraussetzung ist Vertrautheit mit React und mit den Grundbegriffen von Three.js, also Szene, Kamera, Mesh, Geometrie und Material, da R3F diese Konzepte unverändert übernimmt statt sie zu vereinfachen. Die Bibliothek folgt jeweils einer React-Hauptversion: Version 8 von @react-three/fiber ist an React 18 gekoppelt, Version 9 an React 19. Neben dem Web-Einstiegspunkt existiert über Expo ein eigener Pfad für React Native, mit denselben JSX-Konzepten, aber eigenem Import aus @react-three/fiber/native.
Gegenüber der direkten Arbeit mit Three.js verzichtet R3F laut eigener Aussage auf keine Funktion und erzeugt keinen messbaren Overhead, weil Komponenten außerhalb des React-Renderings laufen; neue Three.js-Features stehen sofort zur Verfügung, ohne dass R3F selbst aktualisiert werden muss. Innerhalb eines Werkzeugkastens für WebGL- und Shader-Effekte ist R3F das Foundation-Layer, auf dem höhere, fertige Effekt-Bibliotheken wie animierte Gradient-Hintergründe aufbauen. Für vorgefertigte Effekte ohne eigenen 3D-Code sind solche höheren Bibliotheken oft der schnellere Weg, für individuelle 3D-Szenen und eigene Shader bleibt React Three Fiber die Basis.
