Die Bewegungs-Tween-Animation

Allgemein Schlagwörter: , 0 Kommentare

Gestern zeigt ich Euch, wie ich mit einem Konverter aus einer Wavefront OBJ Datei eine JavaScript Object Notation Datei erstelle. In diesem r23Artiekel erfährst du, wie du mit der WebGL-basierten Bibliothek Three.js die Dynamik der Tween-Animation modellieren und visualisieren kannst.

Für die Bewegungs-Tween-Animation verwende ich die JavaScript Object Notation Datei von gestern. In dem folgenden Beispiel der Tween-Animation ist das Hinzufügen von Beschleunigungen und das Abbremsen gut sichtbar.

Die systemeigene WebGL-Grafikprogrammierung und den notwendigen mathematischen Funktionen (Matrizen, Quaternionen usw.) kann recht komplex sein. Um diese Komplexität zu entschärfen, wurde eine Reihe von Bibliotheken entwickelt, die die Programmierung vereinfachen, darunter Three.js. Im Folgenden befassen wir uns mit den Grundlagen dieser Bibliothek.

verwendet ein rechtshändiges Koordinatensystem:

 Links- und rechtshändige Koordinatensysteme

von Qniemiec (LRHREGEL de.png) [CC0], via Wikimedia Commons

Wenn einer Szene ein Three.js-Objekt wie ein Würfe hinzugefügt wird, wird das Objekt standardmäßig am Ursprung des xyz-Koordinatensystems hinzugefügt. Werden einer Szene ein Kameraobjekt und ein Würfe hinzugefügt, werden daher beide Objekt bei (0, 0, 0) platziert, und du blickst von innen auf den Würfe. Die Lösung besteht darin, die Kamera an eine geeignete Position zu verschieben.

Der erste Parameter (60) definiert das vertikale Sichtfeld der Kamera in Grad (von unten zum oberen Teil der Ansicht). Dies ist der Bereich der „sichtbaren Welt“, der immer auf dem Bildschirm zu sehen ist. Das horizontale Sichtfeld wird anhand des vertikalen Sichtfelds berechnet.

Der zweite Parameter (window.innerWidth / window.innerHeight) definiert das Seitenverhältnis der Kamera. Im Allgemeinen verwenden wir die Breite des Viewportelements dividiert durch seine Höhe, da das Bild andernfalls gequetscht wirken kann.

Der dritte Parameter (1) definiert die Ebene nahe des Kamerafrustums. In diesem Fall fällt die Ebene nahe des Frustums fast mit der xy-Ebene(d. h. dem Bildschirm) zusammen.

Der letzte Parameter (100000 ) definiert die vom Kamerafrustum entfernte Ebene. Wenn ein Objekt weiter als ±100000 Einheiten verschoben wird, liegt es in diesem Fall außerhalb der sichtbaren Three.js-Welt und wird nicht angezeigt.

Kamera

 

Tweening

Unter Tweening (Abkürzung für inbetweening, von engl. in between) versteht man bei der Schlüsselbildanimation ein Verfahren, bei der Einzelbilder zwischen zwei Schlüsselbildern einer Animation erzeugt werden, um den Eindruck einer flüssigen Veränderung zu erwecken. Die zwischen den Schlüsselbildern entstandenen Bilder nennt man Inbetweens.

TweenJS ermöglicht das Tweenen und Animieren von HTML5- und JavaScript-Properties mittels eines Tweening Interface und erlaubt es, Tweens und Actions miteinander zu verbinden, um so komplexe Sequenzen zu erstellen.

TweenJS

 

Beispiel im neuen Browser-Fenster anzeigen.
https://blog.r23.de/3d/loader/tween.html

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

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