18 VIEWS

It’s #FrontendFriday – three.js Einführung – 3D Framework für den Browser

02.10.2020

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:

Class Diagramm

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 1 ner Sekunde au. 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.

Fazit

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 das euch der Blogpost einen kleinen Einblick gegeben hat, wie das Grundprinzip ist. Solltet ihr noch Fragen haben, meldet euch gerne in den Kommentaren.

Schönes Wochenende!
Nico


Quellen

[1] threejs.org – Abgerufen 2020-10-02

 

Zurück zur Übersicht

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*Pflichtfelder

*

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.