Das Ziel dieses Beitrags ist es, eine kurze Einführung in Three.js zu geben. Wir beginnen mit dem Aufbau einer Szene, mit einem sich drehenden Würfel. Ein Arbeitsbeispiel finden Sie unten auf der Seite, falls Sie stecken bleiben und Hilfe benötigen.
Bevor wir anfangen.
Bevor Sie Three.js verwenden können, benötigen Sie einen Anwendung, mit der Sie Ihren Content anzeigen lassen können. Speichern Sie das folgende HTML in einer Datei auf Ihrem Computer, zusammen mit einer Kopie von Three.js im Verzeichnis js/ und öffnen Sie es in Ihren Browser.
Das ist alles. Der gesamte untenstehende Code geht in das leere
Nehmen wir uns einen Moment Zeit, um zu erklären, was hier vor sich geht. Wir haben nun die Szene, unsere Kamera und den Renderer eingerichtet.
Es gibt ein paar verschiedene Kameras in Three.js. Im Moment verwenden wir eine PerspectiveCamera.
Das erste Attribut ist das Sichtfeld. FOV ist die Ausdehnung der Szene, die zu einem bestimmten Zeitpunkt auf dem Display zu sehen ist. Der Wert ist in Grad angegeben.
Das Zweite ist das Seitenverhältnis. Sie sollten fast immer die Breite des Elements durch die Höhe dividieren oder Sie erhalten das gleiche Ergebnis wie bei der Wiedergabe alter Filme auf einem Breitbildfernseher – das Bild sieht eher zerquetscht aus.
Die nächsten beiden Attribute sind die nahe und ferne Schnittebene. Das bedeutet, dass Objekte, die weiter von der Kamera entfernt sind als der Wert von weit oder näher als nahe, nicht wiedergegeben werden. Sie müssen sich jetzt keine Sorgen machen, aber Sie können andere Werte in Ihren Anwendungen verwenden, um eine bessere Leistung zu erzielen.
Als nächstes kommt der Renderer. Hier geschieht das eigentlich Bemerkenswerte. Zusätzlich zum WebGL–Renderer, den wir hier verwenden, enthält Three.js ein paar andere, die oft als Fallbacks für Nutzer mit älteren Browsern oder für diejenigen verwendet werden, die aus irgendeinem Grund keine WebGL-Unterstützung haben.
Zusätzlich zur Erstellung der Renderer-Instance müssen wir auch die Größe festlegen, in der unsere App gerendert werden soll. Es ist eine gute Idee, die Breite und Höhe des Bereichs, den wir mit unserer App füllen wollen, zu verwenden – in diesem Fall die Breite und Höhe des Browserfensters. Für leistungsintensive Anwendungen können Sie setSize auch kleinere Werte geben, wie window.innerWidth/2 und window.innerHeight/2, wodurch das App-Rendering auf die halbe Größe reduziert wird.
Wenn Sie die Größe Ihrer App beibehalten, sie aber in einer niedrigeren Auflösung rendern möchten, können Sie dies tun, indem Sie setSize mit false als updateStyle aufrufen (das dritte Argument). Zum Beispiel rendert setSize (window.innerWidth/2, window.innerHeight/2, false) Ihre App in halber Auflösung, da Ihr Last but not least fügen wir das Renderer-Element zu unserem HTML-Dokument hinzu. Dies ist ein -Element, das der Renderer verwendet, um uns die Szene anzuzeigen. „Das ist alles gut, aber wo ist der Würfel, den Sie versprochen haben?“. Lassen Sie es uns jetzt hinzufügen.
Um einen Würfel zu erstellen, benötigen wir eine BoxGeometry. Dies ist ein Objekt, das alle Punkte (Nodes) und Füllungen (Flächen) des Würfels enthält. Wir werden das in Zukunft weiter untersuchen.
Zusätzlich zur Geometrie benötigen wir ein Material, um es einzufärben. Three.js kommt mit mehreren Materialien, aber wir bleiben vorerst beim MeshBasicMaterial. Alle Materialien nehmen ein Objekt von Eigenschaften an, das auf sie angewendet wird. Um die Dinge sehr einfach zu halten, liefern wir nur ein Farbattribut von 0x00ff00, das grün ist. Dies funktioniert genauso wie Farben in CSS oder Photoshop (Hex-Farben).
Das dritte, was wir benötigen, ist ein Mesh. Ein Mesh ist ein Objekt, das eine Geometry nimmt und ein Material darauf anwendet, das wir anschließend in unsere Szene einfügen und uns frei bewegen können.
Standardmäßig wird beim Aufruf von scene.add() das, was wir hinzufügen, zu den Koordinaten (0, 0, 0, 0) hinzugefügt. Dies würde dazu führen, dass sich sowohl die Kamera als auch der Würfel ineinander befinden. Um dies zu vermeiden, bewegen wir die Kamera einfach ein wenig heraus.
Rendern der Szene.
Wenn Sie den Code von oben in die zuvor erstellte HTML-Datei kopiert hätten, könnten Sie nichts sehen. Dies liegt daran, dass wir noch nicht wirklich etwas rendern. Dazu benötigen wir ein so genanntes Rendering oder eine animierte Schleife.
Dadurch entsteht eine Schleife, die den Renderer veranlasst, die Szene bei jedem Aktualisieren des Bildschirms zu zeichnen (auf einem typischen Bildschirm bedeutet das 60 mal pro Sekunde). Wenn Sie neu im Schreiben von Spielen im Browser sind, könnten Sie sagen: „Warum erstellen wir nicht einfach ein setInterval?“. Die Sache ist die – wir könnten, aber requestAnimationFrame hat eine Reihe von Vorteilen. Das vielleicht Wichtigste ist, dass es pausiert, wenn der Benutzer zu einem anderen Browser-Tab navigiert und so seine wertvolle Rechenleistung und Akkulaufzeit nicht verschwendet.
Animation des Würfels.
Wenn Sie den gesamten obigen Code in die Datei einfügen, die Sie vor unserem Start erstellt haben, sollten Sie ein grünes Kästchen sehen. Lasst uns das Ganze etwas interessanter machen, indem wir es drehen.
Fügen Sie das Folgende direkt über dem Aufruf renderer.render in Ihrer Animationsfunktion hinzu:
Dies wird bei jedem Frame (normalerweise 60 mal pro Sekunde) ausgeführt und gibt dem Würfel eine schöne Rotationsanimation. Grundsätzlich muss alles, was Sie während der Ausführung der App verschieben oder ändern möchten, durch die Animationsschleife gehen. Natürlich können Sie von dort aus auch andere Funktionen aufrufen, so dass Sie nicht mit einer Animationsfunktion mit Hunderten von Zeilen enden.
Das Ergebnis.
Herzlichen Glückwunsch. Sie haben nun Ihre erste Three.js-Anwendung abgeschlossen.
Der vollständige Code ist untenstehend verfügbar. Spielen Sie damit herum, um ein besseres Verständnis dafür zu bekommen, wie es funktioniert.
Vielen Dank für Ihren Besuch.