Während eines Hubschrauber-Projekts sind wir auf ThreeJS aufmerksam geworden und seitdem gehört es zu unseren absoluten Favoriten.
Wir haben eine 3D-Szene entwickelt, die ein realistisches und eindringliches Erlebnis des Gameplay bietet, komplett mit einem Board, Festplatten und Interaktionen. Irgendwann wollten wir Animationen hinzufügen und mussten eine Entscheidung treffen.
Im Folgenden möchte ich die Vor- und Nachteile der programmatischen Animation im Vergleich zur manuellen erklären.
ThreeJS, wenn 3D auf 3W trifft.
Wie der Name schon sagt, ist ThreeJS eine JavaScript-Library, die 3D-Funktionen in das World Wide Web bringt. Es fungiert als eine leichte Fassade zwischen ihrem Code und einigen großartigen Browser-Funktionen wie WebGL, Canvas, CSS3D und SVG.
Mit ThreeJS können Sie Geometrien programmgesteuert erstellen oder aus JSON-Dateien importieren. Das Gleiche gilt für Animationen. Lassen Sie uns die verschiedenen Möglichkeiten zur Programmierung von Animationen betrachten.
Manuelle Mesh-Animationen, die Use Cases.
In der traditionellen Welt des 3D ist es üblich, Meshes direkt in einem 3D-Tool zu animieren wie z.B. Autodesk Maya oder Blender.
Obwohl diese Tools ihnen unbegrenzte Möglichkeiten bieten, da Sie alle Keyframes einzeln steuern können, sind sie auch sehr komplex zu übernehmen.
Da alle Vektoren für jeden Frame der Animation gespeichert werden, entstehen schwere Dateien, deren Import in Projekte länger dauert.
Hier sind die Vor- und Nachteile des manuellen Blendings:
Vorteile
- Grenzenlos
- Ermöglicht ihnen eine Vorschau im Handumdrehen
- Ermöglicht es ihnen, einige neue Fähigkeiten zu entwickeln
Nachteile
- Exportierte Dateien sind schwerwiegend
- Keine Kontrolle zur Laufzeit
Deklarative Mesh-Animationen, der einfache Weg?
ThreeJS ist ein fantastisches Werkzeug, mit dem Sie sehr komplexe Umgebungen erstellen können. Aber in einigen Fällen kann die Animation von Objekten aus einem Tool übertrieben und zeitaufwendig sein. Dies ist insbesondere dann der Fall, wenn das Ziel darin besteht, einem Mesh eine einfache Animation zum Verschieben, Drehen oder Skalieren hinzuzufügen. Deshalb haben wir nach einer einfacheren Möglichkeit gesucht, um unseren Board-Disketten eine Wendeanimation hinzuzufügen.
TweenJS ist eine JavaScript-Tweening-Bibliothek, die unter MIT-Lizenz veröffentlicht wird und Teil der createJS-Suite ist. Es ermöglicht die Erstellung von Übergängen sowohl auf Objekt- als auch auf CSS-Eigenschaften.
Die Funktionsweise von TweenJS ist sehr einfach. Für jeden „Tick“ bestimmt TweenJS einen neuen Zwischenwert und weist ihn der gewünschten Eigenschaft zu. Um diese Aufgabe zu erfüllen, berechnet TweenJS ein einfaches „Kreuzprodukt“ aus verschiedenen Variablen.
Zuerst nimmt es die Zeit in Anspruch, die seit dem „Start“-Trigger der Animation verstrichen ist. Für diese verstrichene Zeit definiert dieser einen Prozentsatz, aus dem der Übergangswert der geänderten Eigenschaft zwischen Anfang und Ende berechnet wird.
Angenommen, Sie wollen die Position eines Würfels auf der „x“-Achse in 10 Sekunden von 0 auf 100 Pixel ändern und der „Tick“ wird alle jede Sekunde ausgelöst. Daher werden die verschiedenen berechneten Werte für die „x“-Achse anschließend 10px, 20px, 30px und so weiter sein.
Natürlich ist dies nur ein Beispiel, im wirklichen Leben ist es üblich, einen Ticker zu verwenden, der etwa alle 16,66ms ausgelöst wird, 1000/60 für 60fps mit requestAnimationFrame.
Hier ist eine kleine App, um ihnen das Konzept „umfassender“ zu zeigen. In diesem Beispiel können Sie die Zeit mit einem einfachen Slider durchlaufen, einen Überblick über die berechneten Eigenschaften haben und das endgültige Rendering sehen.
Ein weiterer Vorteil deklarativer Animationen ist die Möglichkeit, sie zu verketten.
Tatsächlich ist jede Animation ein einfaches JS-Objekt, das gespeichert, stummgeschaltet und nacheinander oder gleichzeitig zu einer anderen verwendet werden kann.
So können Sie beispielsweise ihre Animationsobjekte in ein Versprechen einpacken und von einem voll funktionsfähigen Animationssystem profitieren.
Hier sind die Vor- und Nachteile des deklarativen Blendings:
Vorteile
- Einfach zu bedienen
- Sehr leicht im Vergleich zum manuellen Blending
- Kombinieren Sie mehrere Animationen
Nachteile
- Sehr schwer zu erstellende komplexe Animationen
Schlußfolgerungen.
Meine Erfahrungen mit ThreeJS waren sehr interessant. Obwohl es auf den ersten Blick schwierig war, einzutauchen, war es nach einiger Zeit sehr intuitiv und produktiv.
Die Möglichkeiten, die ThreeJS ohne 3D-Kenntnisse bietet, sind sehr wichtig, wenn es darum geht, im Handumdrehen einige multidimensionale Projekte zu erstellen.
In Verbindung mit ThreeJS reicht TweenJS aus, um angenehme Bewegungen für unsere Projekte zu erzeugen. In Anbetracht der Tatsache, dass Übergänge und Animationen heutzutage nicht mehr möglich sind, ist das sehr wichtig. In anderen Fällen bietet ThreeJS die Möglichkeit, manuelle Animationen zu importieren.
Vielen Dank für ihren Besuch.