3D-Darstellung mit JavaScript 13.04.2020, 00:00 Uhr

In die dritte Dimension

Rotationskörper, Text, BumpMaps – weitere Features der Bibliothek three.js.

Im ersten Artikel [1] zum Thema JavaScript und der Bibliothek three.js [2] wurden ein einfacher Quader, ein Hammer und ein fertiges Modell einer Heckenschere in Form einer kleinen Preisliste zur Anzeige gebracht. Darüber hinaus wurde die dreidimensionale Darstellung durch den Einsatz von Licht und Schatten verbessert sowie einige Diagnosemöglichkeiten vorgestellt.

In diesem Artikel wollen wir nachlegen, indem wir Ihnen weitere Funktionen für Rotationskörper, 3D-Text und BumpMaps vorstellen (Bild 1). Um einen Teelichthalter zu modellieren, erzeugen wir diesen als LatheBufferGeometry. Hierbei wird auf der XY-Ebene sozusagen eine Hälfte der Silhouette des zu erzeugenden Objektes mit zweidimensionalen Koordinaten definiert. Die Punkte formen einen Pfad aus geraden und gebogenen Liniensegmenten. Dieser Pfad wird dann um die Y-Achse gedreht, sodass ein um die Z-Achse rotationssymmetrisches dreidimensionales Objekt entsteht. Bild 2 zeigt den Verlauf des Pfades auf der XY-Ebene. Die gestrichelte Linie ist die gedankliche Ergänzung, welche durch LatheBufferGeometry beim Drehen um die Y-Achse erzeugt wird.

Jetzt 1 Monat kostenlos testen!

Sie wollen zukünftig auch von den Vorteilen eines plus-Abos profitieren? Werden Sie jetzt dotnetpro-plus-Kunde.

+ Digitales Kundenkonto,
+ Zugriff auf das digitale Heft,
+ Zugang zum digitalen Heftarchiv,
+ Auf Wunsch: Weekly Newsletter,
+ Sämtliche Codebeispiele im digitalen Heftarchiv verfügbar