It’s #FrontendFriday – three.js Einführung – 3D Framework für den Browser
Hallo #FrontendFriday-Leser/in,
ich möchte eine kleine Einführung in das three.js Framework geben, mit dem ihr im Browser 3D Visualisierungen (siehe auch meinen anderen Beitrag 3D Visualisierung im Browser) abbilden könnt.
Begriffe
Zum Einstieg in das Thema erkläre ich die Hauptbegriffe:
| Begriff | Beschreibung |
| Scene | Enthält alle Objekte, die dargestellt werden sollen. Meist benötigt man nur eine Scene. |
| Geometry | Beschreibt die Form eines 3D Models. |
| Material | Beschreibt die „Farbe“ eines 3D Models. |
| Mesh | Besteht aus Geometry und Material. Bildet ein 3D Model ab (Form+Farbe). |
| Camera | Virtuelle Kamera, aus deren Sicht die Scene gesehen wird. |
| Light | Lichtquelle, um Lichter in der Scene zu setzen. Licht kann man auch per ambient light global setzen, hat dann keine Schatten. |
| Renderer | Rendert aus Scene und Camera das 3D Bild. |
Als Klassendiagramm dargestellt, kann man sich dies so vorstellen:
Beispiel
Folgend ein Beispiel, bei dem ihr den JavaScript Code und das gerenderte Bild sehen könnt:
See the Pen
threej.js introduction example by Nico (@nmutter)
on CodePen.
Im Beispiel zu beobachten:
- Erstellung der nötigen Objekte (Scene, Camera, Renderer)
- Erstellung von 3D Objekten (Meshes)
- Erstellung von Lichtquellen
- Animation von Objekten
- Rendern der 3D Scene auf den Bildschirm
Als Einstieg wird folgend der Part Animation näher betrachtet.
Animation
Zur (einfachen) Animation von Objekten werden die Eigenschaften eines 3D Objektes wie Position, Rotation (…) kontinuierlich geändert (siehe Funktion animate im Beispiel):
- cube.rotation.x += deltaTime;
- cube.position.x = Math.sin(elapsedTime) * 2;
- material.color.setRGB(0, 1, Math.abs(Math.sin(elapsedTime)));
- …
Hier zu beachten ist der Einfluss der Zeit. Sollte man die vergangene Zeit seit dem letzten Bild nicht in Betracht ziehen, so verhält sich die Animation je nach FPS Anzahl anders.
Beispiel:
| FPS | cube.rotation.x += deltaTime | cube.rotation.x += 0.1; |
|---|---|---|
| 60 | 60 * 0.016 = 1 | 60 * 0.1 = 6 |
| 30 | 30* 0.033 = 1 | 30 * 0.1 = 3 |
| 10 | 10 * 0.1 = 1 | 10 * 0.1 = 1 |
Die Codezeile wird im renderLoop ausgeführt. Die Anzahl der FPS beeinflusst die Anzahl an Durchläufen.
Das Beispiel rechnet den Wert von cube.rotation.x nach einer Sekunde aus. Wie wir sehen, ist das Ergebnis gleich, wenn die Zeit mit in die Rechnung einfließt (deltaTime). Wird die Zeit nicht beachtet (konstanter Wert addiert), haben wir völlig unterschiedliche Ergebnisse.
Das Framework ist im Grunde gut zu benutzen, sofern man sich im 3-dimensionalen Raum orientieren kann. Fachkenntnisse in der Arbeit mit 3D Modellen sind hier sehr von Vorteil und für eigene Modelle oder Anpassungen von vorhandenen Modellen nötig.
Ich hoffe, dass euch der Blogpost einen kleinen Einblick gegeben hat, wie das Grundprinzip funktioniert. Solltet ihr noch Fragen haben, meldet euch gerne in den Kommentaren.
Schönes Wochenende!
Nico
Quellen
[1] threejs.org – Abgerufen 2020-10-02
