In dieser Three.js Einführung baust du von Grund auf deine erste dreidimensionale Szene, die im Browser läuft. Wenn von 3D im Web die Rede ist, steckt als Technologie WebGL dahinter; aber mit rohem WebGL zu arbeiten bedeutet, sich mit Hunderten Zeilen Shader- und Matrixcode herumzuschlagen. Genau hier kommt Three.js ins Spiel und reduziert dieselbe Arbeit auf wenige lesbare Zeilen.
Was ist WebGL?
WebGL (Web Graphics Library) ist eine aus JavaScript aufgerufene Grafik-API, die dem Browser direkten Zugriff auf die Grafikkarte (GPU) gibt. Sie basiert auf dem OpenGL-ES-Standard und zeichnet hardwarebeschleunigte Grafik ohne Plugin auf ein <canvas>-Element. Das heißt: 3D-Modelle, Partikelsysteme und Echtzeitbeleuchtung sind nicht länger Desktop-Anwendungen vorbehalten; sie sind auch auf einer Webseite möglich.
Der Haken ist, dass WebGL sehr hardwarenah ist. Schon um ein einziges Dreieck zu zeichnen, muss man Vertex- und Fragment-Shader schreiben, Buffer anlegen und Projektionsmatrizen von Hand berechnen. Eine Abstraktionsschicht ist für die Produktivität unverzichtbar, und Three.js liefert genau diese Schicht.
Was vereinfacht Three.js?
Three.js ist eine quelloffene JavaScript-Bibliothek, die auf WebGL aufsetzt. Sie arbeitet nach dem Scene-Graph-Modell: Statt jedes Objekt selbst in Shader umzuwandeln, denkst du in einer logischen Hierarchie. Von Haus aus bekommst du:
- Geometrien: fertige Formen wie Würfel, Kugel, Ebene und Zylinder.
- Materialien: Oberflächendefinitionen, die auf Licht reagieren oder nicht.
- Lichter und Kameras: Perspektivkamera, gerichtetes Licht, Umgebungslicht.
- Loader: fertige Werkzeuge für 3D-Modellformate wie
.glb/.gltf.
Drei Kernkonzepte: Szene, Kamera, Renderer
Im Herzen jeder Three.js-Anwendung leben drei Objekte. Die Szene (Scene) ist der Container, in den alle Objekte platziert werden. Die Kamera (Camera) legt fest, aus welchem Winkel du auf die Szene blickst. Der Renderer nimmt die Szene aus Sicht der Kamera und zeichnet sie auf das Canvas. Sobald du dieses Trio verdrahtet hast, steht das Grundgerüst:
import * as THREE from 'three';
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(
75, // Sichtfeld (Grad)
window.innerWidth / window.innerHeight, // Seitenverhältnis
0.1, // nahe Clipping-Ebene
1000 // ferne Clipping-Ebene
);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);Die PerspectiveCamera ahmt das menschliche Auge nach und lässt entfernte Objekte kleiner erscheinen. Bewegen wir die Kamera nicht entlang der z-Achse zurück, bleibt sie im Inneren des Objekts und wir sehen nichts.
Den ersten Würfel erstellen
Fügen wir nun ein Objekt zur Szene hinzu. In Three.js ist ein sichtbares Objekt meist ein Mesh; ein Mesh ist die Kombination aus einer Geometrie (Form) und einem Material (Oberfläche).
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00aaff });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);MeshBasicMaterial wird von Licht nicht beeinflusst; es zeigt immer eine flache Farbe, was es ideal für erste Versuche macht. Wenn du zur Beleuchtung übergehst, musst du MeshStandardMaterial verwenden und ein DirectionalLight zur Szene hinzufügen, sonst erscheint das Objekt pechschwarz.
Die Animationsschleife
Ein einzelnes Bild zu zeichnen reicht nicht; für eine flüssige Animation müssen wir die Szene bei jeder Bildschirmaktualisierung erneut rendern. Der richtige Weg dafür ist requestAnimationFrame, denn es bleibt mit der Bildwiederholrate des Bildschirms (meist 60 FPS) synchron und bremst automatisch ab, wenn der Tab im Hintergrund läuft.
function animate() {
requestAnimationFrame(animate);
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render(scene, camera);
}
animate();Wenn diese Schleife läuft, siehst du den blauen Würfel sich langsam um zwei Achsen drehen. Glückwunsch, du hast soeben deine erste Echtzeit-3D-Szene im Browser aufgesetzt.
Fenstergröße behandeln und nächste Schritte
In einem echten Projekt solltest du Kamera und Renderer aktualisieren, wenn das Fenster seine Größe ändert, damit das Bild nicht verzerrt wird:
window.addEventListener('resize', () => {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(window.innerWidth, window.innerHeight);
});Von hier aus lohnt es sich, folgende Themen zu erkunden: die Szene mit der Maus über OrbitControls drehen, fertige 3D-Modelle mit GLTFLoader laden, sowie Schatten, Texturen und Post-Processing-Effekte. Das Grundgerüst bleibt immer gleich; nur die Objekte, die du der Szene hinzufügst, werden reicher.
Häufige Fragen
Brauche ich fortgeschrittene Mathematik, um Three.js zu lernen?
Zum Einstieg nicht. Die Logik von Szene, Kamera und Mesh zu verstehen genügt. Später, wenn du eigene Shader oder komplexe Kamerafahrten schreiben willst, helfen Grundkenntnisse zu Vektoren und Trigonometrie, doch für deine ersten Projekte sind sie nicht zwingend.
Kann ich Three.js in ein React-Projekt einbinden?
Ja. Mit der Bibliothek react-three-fiber kannst du Three.js als React-Komponenten schreiben und der Scene Graph wird über den Komponentenbaum verwaltet. Da die zugrunde liegende Logik weiterhin reines Three.js ist, ist es ein großer Vorteil, zuerst die nackte Bibliothek zu verstehen.
Warum sieht mein Würfel schwarz aus?
Du verwendest höchstwahrscheinlich ein Material, das auf Licht reagiert (etwa MeshStandardMaterial), aber es gibt kein Licht in der Szene. Füge entweder ein Licht hinzu oder wechsle für einen schnellen Test zu MeshBasicMaterial.
Träumst du von einem 3D-Web-Erlebnis? Ob interaktive Produktvisualisierungen, animierte Intro-Szenen oder WebGL-basierte Portfolios: Wir können gemeinsam daran arbeiten. Nimm Kontakt auf und lass uns deine Idee zum Leben erwecken.