Ein Tutorial von CSS-Tricks vom 4. August 2017 zeigt den Aufbau einer 3D-Szene mit Three.js und WebGL. Die Kombination bringt 3D-Inhalte in Echtzeit in den Browser und abstrahiert die aufwendige WebGL-Programmierung über eine JavaScript-Bibliothek.
Die Grundlage bilden eine Szene, eine Kamera und ein Renderer. Three.js übergibt die Szene an den WebGLRenderer, der das Ergebnis in ein Canvas-Element schreibt. Für Animationen nutzt das Beispiel requestAnimationFrame, sodass die Szene wiederholt gerendert und an die Bildwiederholrate des Browsers angepasst wird.
Physikalisch basierte Materialien und Schatten
Für eine realistischere Darstellung ersetzt das Tutorial einfache MeshBasicMaterial-Flächen durch MeshStandardMaterial. Physikalisch basierte Materialien reagieren auf Licht über Werte für Rauheit und Metallanteil. Ergänzend kommen Farb-, Bump- und Rauheitskarten sowie eine Schattenkarte mit höherer Auflösung zum Einsatz.
Die beschriebenen Verfahren sind nicht auf WebGL beschränkt. Das Tutorial verweist ausdrücklich auf 3D-Produktdarstellungen, Unterhaltung und Werbung. Die technischen Grundsätze für Materialien, Texturen, Beleuchtung und Kameras gelten auch in Three.js-WebVR-Projekten und in Entwicklungsumgebungen wie Unity, Blender, Maya oder 3ds Max.
Das Beispiel bleibt bewusst überschaubar und rendert eine Ebene sowie eine Kugel. Erweiterungen wie Kamerasteuerung, Partikeleffekte, Nachbearbeitung und realistischere Lichtabnahme können darauf aufbauen. Für die lokale Entwicklung genügt ein einfacher Webserver oder ein Online-Editor wie CodePen, da Three.js externe Geometrie und Texturen nachladen kann.