3D Websites mit THREE.js

3D Websites mit THREE.js

Browser unterstützen WebGL (Web Graphics Library), und die damit verbundene Darstellung von 2D/3D Inhalten, bereits seit einiger Zeit nativ durch das «canvas»-Element. Allerdings ist die Arbeit mit der WebGL API ziemlich umständlich, und limitiert die damit umgesetzten Resultate durch die Komplexität der Entwicklung. Die Library THREE.js bietet Abstraktionen für die Erzeugung und Darstellung von 3D Objekten, Kameras und Szenen. Mittlerweile findet sich THREE.js in fast jedem Bereich der Webentwicklung. So werden zum Beispiel Animationen dargestellt, Geschichten erzählt, Produkte präsentiert, oder sogar virtuelle Showrooms in Webseiten integriert. Von der Erzeugung primitiver Objekte (Würfel, Kugel, Pyramide etc.) über Echtzeit-Belichtung bis zum Import bestehender 3D-Objekten bietet THREE.js praktische Hilfsmittel.

Als Beispiel aus der Praxis hier die Schritte, um einen kleinen 3D-Raum im Browser darzustellen. Derselbe Vorgang könnte zum Beispiel zur Anzeige eines Produktes verwendet werden.

Zur Vereinfachung der Erstellung sämtlicher Objekte wurde der Raum zuerst in Blender modelliert, mit Texturen versehen und im GLTF-Format exportiert.

Mithilfe von THREE.js kann diese Geometrie dann importiert und mit den Texturen kombiniert werden. Zur Visualisierung wird eine Kamera platziert und die Steuerung initialisiert. Da die Szene bereits in Blender belichtet wurde, und diese Informationen auf der «Baked» Textur vorhanden sind, müssen keine Lichter hinzugefügt werden.

Zur Veranschaulichung findet sich hier eine vereinfachte Implementation.

Durch die Popularität der Library sind mittlerweile auch Integrationen für bekannte Frameworks wie zum Beispiel React entstanden. React Three Fiber ermöglicht noch einfachere Interaktionen, durch die Verbindung von Komponenten und deklarativem 3D-Rendering. Diese simple Demonstration ist exemplarisch für die Möglichkeiten mit diesem Ansatz.

Die Anwendungsmöglichkeiten von 3D im Web kennen keine Grenzen. Immer mehr wird auf die Technologie zurückgegriffen, um beeindruckende und sich von der Masse abhebende Seiten zu kreieren. Die Zukunft im Web-Bereich bleibt also mit wachsenden Möglichkeiten sicherlich spannend.

Verwandte Themen

Weiterführende Projekte und Inhalte zum Thema