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.

* Die DSGVO-Checkbox ist ein Pflichtfeld

*

Ich stimme zu

Business Shooting

Mit dem visuellen Erscheinungsbild beginnt alles. Egal ob Du Freelancer, langjähriger Unternehmer oder Verantwortlicher eines Start-ups bist – Du musst nach außen kommunizieren, für welche Kompetenzen und Botschaften Du stehst.
Imagefördernde Fotos unterstützen ein Unternehmen dabei, sich erfolgreich und attraktiv zu präsentieren und damit neue Kunden anzusprechen.
Bei meiner Arbeit geht es mir sowohl um die ausdrucksstarke und kompetente Darstellung der Führungskräfte und Mitarbeiter als auch um die repräsentative Abbildung der Produkte.

Aktuell