Einsteigerguide: Einführung in three.js

In dieser Schritt-für-Schritt-Anleitung erstellen wir ein Logo im 3D Design mit Hilfe von Three.js, einem 3D-Grafik-Framework, das auf WebGL aufbaut.

3D Grafiken können schwierig sein, besonders 3D im Browser. Frameworks wieThree.js machen es ein wenig einfacher, aber die offizielle Dokumentation befindet sich noch im Aufbau und es gibt ein paar Eigenheiten, die Einsteiger davon abhalten könnten, überhaupt erst einmal anzufangen. Wenn Sie mit 3D noch nicht vertraut sind, hilft ihnen dieser Leitfaden bei den ersten Schritten.

Three.js wirkt im ersten Augenblick komplex, aber man sollte beachten, dass noch mehr Code benötigt werden würde, um dasselbe in reinem WebGL zu schreiben, weil eine Rendering–Engine geschrieben werden müsste. Der komplexe Teil wird mit Three.js durchgeführt, ohne dabei viel an Flexibilität zu verlieren.

Browserkompatibilität.

Für dieses Tutorial benötigen wir die Desktop-Version von Chrome, Firefox oder Safari. Leider funktioniert WebGL noch nicht auf mobilen Browsern und wird erst ab Version 11 im Internet Explorer verfügbar sein.

Wenn Sie Safari verwenden, müssen Sie WebGL zunächst aktivieren. Dafür sind die folgenden Schritte notwendig:

1. Öffnen Sie das Menü Einstellungen.
2. Klicken Sie auf die Registerkarte Erweitert.
3. Klicken Sie in der Menüleiste auf das Kontrollkästchen mit der Aufschrift Show Develop Menu.
4. Öffnen Sie das Menü Develop in der Menüleiste und wählen Sie Enable WebGL.

Über den folgenden Link gelangen Sie zur caniuse.com-Matrix für die WebGL-Kompatibilität.

Erste Schritte – Three.js herunterladen

Gehen Sie zu der Website http://threejs.org und klicken Sie auf den Link „Download“ auf der linken Seite ihres Bildschirms. Wenn die Zip-Datei heruntergeladen wurde, öffnen Sie diese und gehen Sie in den Build-Ordner. Im Inneren finden Sie eine Datei mit der Bezeichnung three.min.js und wenn Sie mitmachen, sollten Sie diese Datei in ihr lokales Entwicklungsverzeichnis kopieren.

Für dieses Tutorial benötigen Sie außerdem eine Datei mit der Bezeichnung OrbitControls.js, die im Download von three.js enthalten ist. Hier ist ein Beispiel:

threejs folder > examples > js > controls > OrbitControls.js

Wenn Sie einfach nur die beiden Dateien benötigen, sind sie im Beispielcode für dieses Tutorial enthalten.

Lokale Umgebung einrichten.

JavaScript verfügt über ein Sicherheitsmerkmal, das als Same-Origin Policy bezeichnet wird und bedeutet, dass Sie extern gehostete Dateien nicht in ihren JavaScript-Code laden können. Dies kann etwas problematisch sein, da Three.js Geometrie, Texturen und andere Dateien laden muss. Um dieses Problem zu umgehen, benötigen Sie einen lokalen http-Server, damit ihre Dateien vom gleichen Ursprung stammen. Das einfache Öffnen der index.html-Datei direkt im Browser wird nicht funktionieren.

Glücklicherweise gibt es eine Three.js FAQ mit einer exzellenten Anleitung, wie man Three.js lokal mit Python, Ruby oder durch Anpassen der Browsereinstellungen ausführen kann. Es ist einfacher als es klingt. Wenn Sie sich also den Kopf kratzen und sich fragen, warum einige Dateien nicht geladen werden, schauen Sie sich die Anleitung an.

Erstellen von 3D Assets.

Wenn Sie ihre eigenen Meshes erstellen möchten, empfehlen wir ihnen Blender zu nutzen. Es ist ein wunderbares 3D-Modellierungs- und Rendering-Paket, das kostenlos, quelloffen und plattformübergreifend ist. Die Einarbeitungszeit in Blender ist vergleichsweise gering.

Um ein Mesh aus Blender für die Verwendung in Three.js zu exportieren, müssen Sie den Utility-Ordner in Three.js öffnen und den Exporter installieren.

Das HTML.

So weit so gut. Sobald Sie ihre Dateien installiert und ihre lokale Umgebung eingerichtet haben, ist es an der Zeit, mit der Programmierung zu beginnen. Lassen Sie uns zuerst das HTML aus dem Weg räumen, denn das ist der einfache Teil. Sie benötigen nur eine einfache Vorlage, um loslegen zu können. Dies setzt auch voraus, dass ihr JavaScript in einem Ordner mit der Bezeichnung .js gespeichert ist, also überprüfen Sie ihre Dateipfade für alle Fälle.

Das ist bisher nichts Besonderes. Alles erwähnenswerte geschieht zwischen den Skript-Tags.

Erstellen von 3D-Szenen mit Hilfe von three.js

Wir könnten unser JavaScript extern schreiben, aber da es keine HTML-Elemente im Body gibt, wurden Inline-Skript-Tags verwendet, um dieses Beispiel ein wenig klarer zu machen.

Globale Variablen und Funktionen.

Innerhalb unserer Skript-Tags wollen wir einige globale Variablen einrichten und dann einige Funktionen aufrufen, die alle später definiert werden:

Erstellen der Szene.

Three.js verwendet das Konzept einer Szene, um einen Bereich zu definieren, in dem Sie Dinge wie Geometrie, Licht, Kamera usw. platzieren können. Im folgenden Code beginnen wir mit dem Schreiben unserer Initialisierungsfunktion, indem wir eine Szene erstellen. Dann speichern wir die Breite und Höhe des Browserfensters in den Variablen Width und Height. Wir werden Sie später an mehr als einem Ort benötigen, also ist es gut, sie nur einmal zu greifen und zu lagern.

Erstellen des Renderers.

Als nächstes richten wir einen Renderer mit Three.js ein. Wir könnten die SVG– oder Canvas-Renderer verwenden, aber wir entscheiden uns für den WebGL-Renderer, weil er die Vorteile des Grafikprozessors nutzen kann, was ihn um einige Größenordnungen leistungsfähiger macht. Nachdem wir den Renderer erstellt haben, hängen wir ihn über das Body-Element an das DOM an. Dies wird dazu führen, dass Three.js ein Canvas im Inneren des Körperelements erstellt, welche zum Rendern unserer Szene verwendet wird.

Erstellen einer Kamera.

Sobald unsere Szene und unser Renderer an Ort und Stelle sind, können wir eine Kamera erstellen. Die PerspectiveCamera nimmt einige Parameter auf. Das sind sie:

• FOV – wir verwenden 45 Grad für unser Sichtfeld.
• Aspect – wir teilen einfach die Breite und Höhe des Browsers, um ein Seitenverhältnis zu erhalten.
• Near – das ist die Entfernung, in der die Kamera mit dem Rendern von Szenenobjekten beginnt.
• Far – Alles was über diese Distanz hinausgeht, wird nicht gerendert. Vielleicht auch besser bekannt als die draw distance.

Nachdem unsere Kamera erstellt wurde, setzen wir die Position mit Hilfe einiger einfacher XYZ-Koordinaten. Der Standardwert ist 0,0,0,0, aber ich habe den Y-Wert auf 6 gesetzt, nur um einen gewissen Abstand zwischen unserer Ansicht und dem Mesh zu erhalten.

Schließlich müssen wir noch die Kamera in die Szene einbauen.

Aktualisieren des Ansichtsfensters bei Großenänderungen.

Das ist alles gut und schön, aber was passiert, wenn der Website-Besucher die Größe des Website-Fensters ändert? Dazu müssen wir einen Event Listener hinzufügen. Wenn der Browser in der Größe verändert wird, passieren ein paar Dinge. Zuerst werden wir die neue Breite und Höhe des Browsers resamplen und in einer Variablen speichern, die auf die Funktion zugeschnitten ist. Dann verwenden wir diese Werte, um die neue Größe unseres Renderers einzustellen und das Seitenverhältnis der Kamera neu zu berechnen. Zusätzlich müssen wir updateProjectionMatrix() auf dem Kameraobjekt aufrufen, damit unsere Szene tatsächlich mit den neuen Parametern aktualisiert wird. Dies ist im Zusammenhang mit dem Echtzeit-3D-Rendering rechnerisch teuer, aber sobald der Browser in der Größe verwendet wird, erfolgt auch die Wiederherstellung der normalen Bildrate.

Beleuchtung hinzufügen.

Jetzt sind wir soweit, unsere Szene ein wenig zu gestalten. Durch den Aufruf der Funktion setClearColorHex auf unserem WebGL Renderer-Objekt können wir die Hintergrundfarbe unserer Szene auf die Farbe Grey Hex mit einer Opazität von 1 setzen.

Als nächstes benötigen wir ein Licht, um unsere 3D-Objekte zu sehen, also fügen wir der Szene ein PointLight hinzu und legen die Position fest. Daneben existieren mehrere andere Arten von Lichtern, die Sie zu einer Szene hinzufügen können.

Unser Mesh wurde aus Blender mit Hilfe des JSON-Exporters von Three.js exportiert, daher müssen wir den JSONLoader verwenden, um die Geometrie in die Szene zu bringen. Ein Callback wird innerhalb des Loaders verwendet, um das Material auf das Mesh zu setzen. In diesem Fall verwenden wir ein einfaches LambertMaterial, um das Mesh auf die grüne Farbe des Logos zu setzen.

Bevor wir die Callback-Funktion verlassen, erstellen wir ein neues Mesh mit unserer Geometrie und dem Material als Parameter, dann fügen wir das Mesh der Szene hinzu.

Controls hinzufügen.

Das Letzte, was wir un unserer Initialisierungsfunktion haben, sind die OrbitControls, die wir vorher eingebaut haben. Diese sind nicht unbedingt notwendig, aber sie erlauben es uns, die Maus über das Mesh zu ziehen und um es herum zu kreisen. Mit dem Mausrad können Sie auch das Mesh vergrößern oder verkleinern.

Die Szene rendern.

Nach unserer Initialisierungsfunktion müssen wir mit unserer Animationsfunktion fertig werden. Es mag nicht so aussehen, als ob hier im traditionellen Sinne etwas wirklich animiert wäre, aber wir müssen es neu zeichnen, wenn die Kamera um das Mesh kreist.

Die Funktion requestAnimationFrame() verwendet eine neuere Browser-API, die Redraws an den Browser delegiert. Dies hat einige ziemlich coole Vorteile, aber vor allem stellt es sicher, dass der Browser ihre Animation nicht unnötig zeichnet, wenn diese Registerkarte nicht gerade ausgewählt ist. Paul Irish schrieb einen exzellenten Blog-Post, der dies näher erläutert.

Anschließend müssen wir unsere Szene durch die Kamera rendern, die wir vorher hinzugefügt haben und dann die Orbit Controls aktualisieren.

Um zu sehen, wie das Endergebnis aussieht, laden Sie den Code herunter. Versuchen Sie einige der Parameter zu ändern und sie werden sehen, was passiert.

Was kommt als Nächstes?

Three.js ist ein erstaunliches Projekt, welche die Vorteile von WebGL für Leute zugänglich macht, die keine 3D-Grafik-Experten sind. Die Kompatibilität zu vielen Browsern verbessert sich stetig, aber es entsteht immer der Eindruck, dass einige der praktischsten Anwendungen von WebGL mit Produktdemos ausgestattet sind.

Mit Three.js können recht schnell eigene Logos oder Musikvideos erstellt werden, ohne jahrelang Renderer oder andere komplexe Codes schreiben zu müssen. Wenn Sie ein wenig engagierter sind, können Sie sogar Spiele entwickeln und Welten bauen. Es macht den Browser zu einem viel erlebnisreicheren Ort, was ich für ziemlich genial halte.