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

Allgemein Schlagwörter: , 0 Kommentare
Voiced by Amazon Polly

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!

Wie können wir Ihnen helfen?

Sie wollen online richtig verkaufen? Wir unterstützen Sie bei der Umsetzung Ihres E-Commerce Projektes! Egal ob 360° Produktfotografie, Service, Charakterdesign, 3D Visualisierung oder Architekturvisualisierung – wir beraten Sie persönlich und unverbindlich.

Wünschen Sie ein individuelles Angebot auf Basis Ihrer aktuellen Vorlagen, nutzen Sie einfach unser Anfrageformular.



Schreibe einen Kommentar

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

Durch das Anhaken der Checkbox erklären Sie sich mit der Speicherung und Verabeitung Ihrer 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 finden Sie in der Datenschutzerklärung.

Aktuell