3D im Internet: three.js webgl – materials – cube reflection

Allgemein Schlagwörter: , 0 Kommentare

Zum Wochenausklang habe ich noch ein paar fantastische 3D Animationen für Euch. Die animierten 3D-Car Darstellungen stammen aus der Bespielsammlung von . Mit der JavaScript-Bibliothek three.js lassen sich im Browser animierte Darstellungen in 3D erstellen. three.js erzeugt mit Hilfe der Anaglyphenbildtechnik einen räumlichen Eindruck.

Meine Stammleser können sich sicherlich noch an die 3D Teekanne auf einer Brücke erinnern?

Navigationshilfe

3D-Modell drehen: Drücken der linken Maustaste und bewegen der Maus
Vergrößern/Verkleinern: Mausrad drehen
Verschieben: die mittleren Maustaste gedrückt halten und die Maus bewegen

Die Beispiele kannst du dir in einem neuen Browser-Fenster anzeigen lassen.
https://blog.r23.de/3d/loader/cubemap.html

Auf der Brücke drehen wir heute in der Luft die Autos: Bugatti Veyron, Lamborghini Gallardo, Ferrari F50 und Chevrolet Camaro. In den 3D Animationen können wir die Lackierung per Klick ändern. Bugatti Veyron wurde von Troyano, Lamborghini Gallardo wurde von machman_3d, Ferrari F50 wurde von daniel sathya und Chevrolet Camaro wurde von dskfnwn erstellt.

Bevor wir uns die 3D Animation ansehen noch etwas Physik.

Das Einkörperproblem

Stellen Sie sich ein Universum vor, das abgesehen von einem einzigen Himmelskörper (Masse) wie einem Stern oder Planeten gänzlich leer ist. Bei einem solchen Universum stellt sich folgendes Einkörperproblem:

Wie können Sie anhand einer anfänglichen Position und Geschwindigkeit für die Masse die Bewegung der Masse als Funktion der Zeit vorhersagen?

Die Antwort ist, wie Sie vielleicht wissen, einfach:

  • Wenn die Geschwindigkeit v der Masse 0 ist, bewegt sich die Masse nie (keine Bewegung).
  • Wenn die Geschwindigkeit v der Masse nicht 0 ist, bewegt sich die Masse mit einer konstanten Geschwindigkeit und Richtung entsprechend v.

Obwohl es beim Einkörperproblem keine interessante Dynamik gibt, bietet es doch die Möglichkeit, ein Three.js-„Universum“ einzurichten.

Das Beispiel kannst du dir in einem neuen Browser-Fenster anzeigen lassen.
https://blog.r23.de/r23webvr/three.js-r86/examples/webgl_materials_cars.html

Code

Der Quellcode für die 3D-Oberflächenmodelle ist verfügbar.

Nützliche Links

Aktivieren Sie JavaScript um das Video zu sehen.
Video-Link: https://blog.r23.de/3d-im-internet-openctm-camaro/
Aktivieren Sie JavaScript um das Video zu sehen.
Video-Link: https://blog.r23.de/panorama-cube-mapping-oder-cubic-environment-mapping/

Jetzt bist du gefragt!

Hast du Anregungen, Ergänzungen, einen Fehler gefunden oder ist dieser Beitrag nicht mehr aktuell? Dann freue ich mich auf deinen Kommentar.

Du kannst diesen Beitrag natürlich auch weiterempfehlen. Ich bin dir für jede Unterstützung dankbar!

Schreibe einen Kommentar

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

 Durch das Anhaken der Checkbox erklärst Du Dich mit der Speicherung und Verabeitung Deiner Daten durch diese Webseite einverstanden. Um die Übersicht über Kommentare zu behalten und Missbrauch zu verhindern, speichert diese Webseite Name, E-Mail und Kommentar. Detaillierte Informationen findest Du in meiner Datenschutzerklärung

Aktuell