React Three Fiber auf GitHub ansehen
React Three Fiber ist ein React-Renderer für Three.js, die verbreitete 3D-Bibliothek fürs Web. Es stammt vom Open-Source-Kollektiv Poimandres (pmndrs).
Es ist kein Agent-Skill, sondern eine Code-Bibliothek. Du beschreibst die gewünschte 3D-Szene, und dein KI-Agent schreibt die Komponenten.
Es ist kostenlos unter der MIT-Lizenz. Am 28. Oktober 2026 hatte das Repository auf GitHub rund 33.000 Sterne.
Was es tut
- Jedes Three.js-Objekt wird zu einem JSX-Element: Ein Mesh, ein Licht oder eine Kamera wird wie jede andere Komponente geschrieben.
- Objekte können auf State, Klicks und Hover reagieren, und jedes kann in jedem Frame seine eigene Animation ausführen.
- Laut README funktioniert hier alles, was in Three.js funktioniert, ohne Overhead, weil die Szene außerhalb von React gerendert wird.
- Es funktioniert auch in React Native.
Was du damit einbauen kannst
Ein Produktmodell, das Besucher drehen können, ein 3D-Hero-Bereich oder ein kleines animiertes Objekt hinter einer Überschrift. Darum herum gibt es ein großes Ökosystem: Drei liefert fertige Helfer, und weitere Pakete bringen Post-Processing-Effekte, Physik sowie VR oder AR.
Was du vorher wissen solltest
Die Version muss zu deiner React-Version passen: Version 8 funktioniert mit React 18, Version 9 mit React 19. Das README sagt außerdem, dass du React und Three.js kennen solltest, bevor du anfängst. Auch wenn ein Agent den Code schreibt, hilft es zu verstehen, was er baut. Eine 3D-Szene macht die Seite außerdem schwerer, also prüfe, wie sie auf Handys lädt.
So installierst du es
npm install three @types/three @react-three/fiberDann bitte deinen Agenten um die gewünschte Szene, zum Beispiel ein Modell deines Produkts, das sich beim Ziehen dreht.