3D in React-Apps mit React Three Fiber.
Deine Anwendung läuft mit React oder Next.js und soll 3D bekommen? React Three Fiber bringt Three.js in die Komponentenwelt. Ich integriere 3D-Szenen so, dass sie sich wie der Rest der App verhalten — mit State, Props und sauberem Aufräumen.
Three.js, aber als Komponenten.
React Three Fiber (kurz R3F) ist eine Brücke zwischen React und Three.js. Statt eine Szene Befehl für Befehl aufzubauen, beschreibt man sie wie eine React-Oberfläche: Ein Modell ist eine Komponente, eine Farbe ein Prop, eine Auswahl ein State. Darunter arbeitet dasselbe Three.js.
Der Vorteil zeigt sich in bestehenden React-Anwendungen: Ein Konfigurator, bei dem die Auswahl im Formular sofort das 3D-Modell verändert, ist mit R3F deutlich natürlicher zu bauen. State fließt in die Szene, Klicks in der Szene fließen zurück in die App.
Ehrliche Einordnung meines Profils
Mein Schwerpunkt liegt auf Three.js — alle Live-Demos auf dieser Website sind damit gebaut. Parallel entwickle ich React-Anwendungen. React Three Fiber verbindet genau diese beiden Welten, und weil es dasselbe Three.js darunter nutzt, übertragen sich Wissen über Performance, Modelle und Licht eins zu eins. Die Demos unten zeigen die Three.js-Seite davon.
Wann R3F sinnvoll ist — und wann nicht
- Sinnvoll: Die Anwendung läuft bereits mit React oder Next.js, und 3D soll eng mit der übrigen Oberfläche verzahnt sein.
- Sinnvoll: Viele UI-Zustände steuern die Szene, etwa Formulare, Filter oder Warenkörbe.
- Nicht nötig: Die Website ist klassisch aufgebaut, etwa mit WordPress. Dann ist reines Three.js schlanker.
- Nicht nötig: Eine einzelne, eigenständige Animation ohne Verbindung zur App.
import { Canvas } from '@react-three/fiber';
import { OrbitControls, useGLTF, Environment } from '@react-three/drei';
function Produkt({ farbe }) {
const { scene } = useGLTF('/modelle/produkt.glb');
scene.traverse((o) => { if (o.isMesh && o.name === 'Korpus') o.material.color.set(farbe); });
return <primitive object={scene} />;
}
export default function Konfigurator({ farbe }) {
return (
<Canvas camera={{ position: [0, 1, 4], fov: 45 }} dpr={[1, 2]}>
<Environment preset="studio" />
<Produkt farbe={farbe} />
<OrbitControls enableDamping />
</Canvas>
);
}Die Farbe kommt als Prop aus der übrigen App — ändert der Nutzer sie im Formular, aktualisiert sich das Modell ohne weiteren Code.
Nicht glauben — ausprobieren.
Alle Demos laufen live im Browser, auch auf dem Smartphone.
FAQ — React Three Fiber Entwickler.
Was ist React Three Fiber?
React Three Fiber ist eine Bibliothek, die Three.js in React nutzbar macht. Szenen werden als React-Komponenten beschrieben, sodass State und Props direkt steuern, was im 3D-Bild zu sehen ist. Unter der Oberfläche arbeitet dasselbe Three.js.
Ist React Three Fiber langsamer als reines Three.js?
Der Mehraufwand ist bei richtiger Umsetzung gering, weil das Rendering weiterhin von Three.js erledigt wird. Leistungsprobleme entstehen meist durch unnötige Neu-Renderings in React, etwa wenn sich State in jedem Frame ändert. Für solche Fälle gibt es in R3F eigene Muster, die React umgehen.
Funktioniert das mit Next.js?
Ja. Die 3D-Szene muss dabei auf dem Client gerendert werden, da WebGL im Browser läuft. In Next.js wird die Komponente deshalb als Client-Komponente markiert oder dynamisch ohne serverseitiges Rendering geladen.
Brauche ich React Three Fiber für meine Website?
Nur, wenn deine Anwendung bereits mit React läuft und 3D eng mit der übrigen Oberfläche verbunden sein soll. Für klassische Websites, etwa mit WordPress, ist reines Three.js schlanker und einfacher zu pflegen.
Hast du Referenzen mit React Three Fiber?
Meine Live-Demos sind mit reinem Three.js gebaut, parallel entwickle ich React-Anwendungen. React Three Fiber verbindet beides und nutzt dasselbe Three.js darunter, weshalb sich das Wissen zu Modellen, Licht und Performance direkt überträgt. Ich stelle das bewusst offen dar, statt Referenzen zu behaupten.
Das bin ich – rechts im BildErzähl mir, was du zeigen willst.
Ich sage dir ehrlich, ob sich 3D für dein Vorhaben lohnt — und wenn nicht, was stattdessen mehr bringt.
Antwort meist innerhalb von 24 Stunden · hallo@manuelkillert.de