Der folgende Beitrag thematisiert das Drehen eines 3D-Würfels mit ThreeJS.[mfn]Bei diesem Beitrag handelt es sich um eine deutsche Originalübersetzung eines Beitrags von Vihar Kumara. Das englische Original finden Sie auf der folgenden Website.[/mfn]
Die 3D-Grafikprogrammierung ist in einer Vielzahl von Anwendungen nützlich, z. B. zur Erläuterung eines Themas durch 3D-Diagramme, zum Entwerfen von Spielen, AR, VR und vielen anderen. Um 3D-Grafiken in eine Webseite einzubetten, benötigen wir jedoch eine bestimmte Art von Programmierung. Hierfür können wir WebGL verwenden, mit dem Sie über JavaScript auf die Grafikhardware des Computers – einschließlich der GPU – zugreifen können.
WebGL ist jedoch keine Magie. Während es bei einfachen 3D-Objekten wie Linien und Punkten gut funktioniert, haben wir in der realen Welt in der Regel nicht mit solch unkomplizierten Strukturen zu tun. Wenn es um komplexere Objekte geht, umfasst WebGL große Code-Blöcke. Um unsere Ziele mit weniger Codezeilen zu erreichen, greifen wir auf ThreeJS zurück, eine JavaScript-Bibliothek, die dabei hilft, 3D-Inhalte auf eine Webseite zu bringen. In diesem Beitrag sehen wir uns ein Beispiel für die Verwendung von ThreeJS beim Rendern von 3D-Objekten an. Anschließend präsentieren wir Ihnen eine kleine Aufgabe, die Sie selbst bewältigen müssen. Noch ein kleiner Hinweis bevor wir anfangen: ThreeJS verwendet intern einen WebGL-Renderer, indem eine einfache API offengelegt wird.
Ein einfaches Beispiel: Drehen eines Würfels.
Zu Beginn muss ein Repository mit der Bezeichnung animations_threejs erstellt werden. Anschließend müssen Sie zum Repository navigieren und ein weiteres Repository mit der Bezeichnung js erstellen, um alle js-Dateien zu speichern.
Als nächstes muss ThreeJS-Code in das js-Repository importiert werden, um alle API-Aufrufe nutzen zu können, die es zur Verfügung stellt. Dazu muss der ThreeJS-Librarycode in eine Datei eingefügt und anschließend in eine HTML-Datei importiert werden. Erstellen Sie eine Datei mit der Bezeichnung ThreeJS und kopieren Sie den Code von diesem Link.
Erstellen Sie im animations_threejs-Repository eine Datei mit der Bezeichnung rotatecube.html. So sieht die Struktur des Repositorys aus:
Anschließend muss die Datei rotatecube.html geschrieben werden, indem die Anwendung zum Drehen eines Würfels kodiert wird.
Stufe 1 – Erstellen eines HTML-Templates.
Dies ist das grundlegende HTML-Template. Jetzt wird der gesamte Code in den <script>-Tag geschrieben.
Schritt 2 – Initiieren der Objekte.
Die erste Zeile beschreibt die verschiedenen Objekte, die in dieser Anwendung verwendet werden.
In den nächsten beiden Zeilen werden zwei Funktionen (init() und animate()) beschrieben, die im Folgenden definiert werden.
In der Funktion init() wird zunächst eine Szene erstellt und anschließend die Kamera definiert, die wir verwendet wird, in diesem Fall die perspektivische Kamera. Das erste Attribut ist das Sichtfeld, d.h. die Ausdehnung der Szene, die auf dem Bildschirm zu sehen ist. Das zweite Attribut ist das Seitenverhältnis, d.h. Breite geteilt durch Höhe. Das dritte und vierte Attribut bezeichnen die nahe und ferne Ausschnittebene. Diese Ebenen legen die Grenzen der Objekte fest, die gerendert werden: Objekte, die weiter als der Wert der fernen Ebene oder näher als der Wert der nahen Ebene liegen, werden nicht gerendert.
Die nächste Zeile definiert die Kameraposition, die 500 Punkte über dem Ursprung projiziert wird. Anschließend wird die Kamera zu der oben definierten Szene hinzugefügt.
Das anzuzeigende Objekt ist ein Würfel, der mit CubeGeometry importiert wird. Dieses Objekt hat alle Eckpunkte und Flächen des Würfels.
MeshNormalMaterial färbt den Würfel. Es sind viele Materialien verfügbar, aber für den Moment werden wir dieses verwenden, bei dem die Normalenvektoren auf RGB-Farben abgebildet werden. Dies wird die mehrfarbige Darstellung erzeugen, die wir schließlich sehen werden.
Ein Mesh trägt Material auf die Geometrie auf.
Dieses Objekt fügen wir anschließend an den Koordinaten (0,0,0) in unsere Szene ein. Als Folge davon wird die Kamera verschoben, um eine bessere Sicht auf den Würfel zu erhalten. Danach bildet ein RenHTML-Dokument hinzu, das ein canvas-Element ist.
Stufe 3 – Animieren.
Diese Funktion zeichnet die Szene immer dann, wenn der Bildschirm aktualisiert wird. Die Funktion requestAnimationFrame stoppt die Animation, sobald der Benutzer auf eine neue Registerkarte oder ein neues Fenster wechselt.
Die Funktion render() wird wiederholt aufgerufen.
Stufe 4 – Rendern.
Mesh.rotation.x und mesh.rotation.y verleihen dem Würfel einen Animationseffekt.
In der nächsten Zeile nimmt die Funktion render() Szene und Kamera als Argumente für das Rendern im Browserfenster auf.
Stufe 5 – Run.
Der gesamte Code sieht wie folgt aus:
Um die Animation abzuspielen, öffnen Sie die html-Datei in einem Browser. Das Ergebnis ist ein mehrfarbiger, rotierender Würfel. Im Folgenden werden wir eine etwas kompliziertere Anwendung erstellen.
Das Löwenbeispiel.
Nachdem nun einige der Grundlagen bei der Verwendung von ThreeJS besprochen wurden, werden wir Ihnen ein Projekt vorstellen, das Ihnen helfen soll, Ihre Fähigkeiten durch die Erstellung einer komplexen Animation zu erweitern. Werfen Sie zunächst einen Blick auf den Code hier. Der JS-Code ist derjenige, auf den wir uns konzentrieren müssen.
Alle Objekte werden entworfen und erstellt, danach werden die Animationsschleife und die Renderfunktionen definiert. Es sind zahlreiche Funktionen vorhanden, um die Physik dieser Animation zu definieren.
Um Ihnen den Einstieg zu erleichtern, zeigen wir Ihnen unten, wie die Struktur des Repositorys aussehen sollte:
Versuchen Sie zur Übung, dies auf Ihrem Rechner auszuführen, indem Sie alle Brocken in die richtigen Abschnitte Ihrer HTML-Vorlage einfügen, sehen Sie sich anschließend den Code an und versuchen Sie, die Vorgänge vollständig zu verstehen. Sobald Sie das getan haben, können Sie den Löwen erstellen.
Vielen Dank für Ihren Besuch.