Diese html Datei kann anschließend in der index.html durch ein Iframe integriert werden. Unter dem Iframe werden die Untertitel zu den Animationen dargestellt.
Diese html Datei kann anschließend in der index.html durch ein Iframe integriert werden. Unter dem Iframe werden die Untertitel zu den Animationen dargestellt.
...
@@ -202,12 +202,12 @@ Der einfachste Weg, Modelle mit Animationen in ThreeJs zu importieren ist über
...
@@ -202,12 +202,12 @@ Der einfachste Weg, Modelle mit Animationen in ThreeJs zu importieren ist über
```
```
//Load glb model and initialise all animations
//Load glb model and initialise all animations
const loader = new THREE.GLTFLoader();
const loader = new THREE.GLTFLoader();
loader.load('amy\_Animationen\_19012021.glb', function (gltf) {
loader.load('amy_Animationen_19012021.glb', function (gltf) {
```
```
_test_
<h4>Laden der Animationen: _test_</h4>_test_
<h4>Laden der Animationen:</h4>
In dem load() Script müssen die *miau*[Animationen](https://threejs.org/docs/#manual/en/introduction/Animation-system) initialisiert werden. Dazu wird durch den Array animations iteriert. Jede _Animation_ beinhaltet einen Clip mit dem Namen und den Aktivitäten für einen einzelnen Bewegungsablauf. So besteht jedes Gebärdenwort wie z.B. _Hallo_ aus einem Clip.
In dem load() Script müssen die [Animationen](https://threejs.org/docs/#manual/en/introduction/Animation-system) initialisiert werden. Dazu wird durch den Array animations iteriert. Jede Animation beinhaltet einen Clip mit dem Namen und den Aktivitäten für einen einzelnen Bewegungsablauf. So besteht jedes Gebärdenwort wie z.B. Hallo aus einem Clip.
Wenn eine action in dem vorher definierten _Wörterbuch_, den baseActions enthalten ist, wird die action aktiviert und dem array _allActions_ hinzugefügt. Anschließend wird Animate() aufgerufen, was die Render Loop startet.
Wenn eine action in dem vorher definierten Wörterbuch, den baseActions enthalten ist, wird die action aktiviert und dem array _allActions_ hinzugefügt. Anschließend wird Animate() aufgerufen, was die Render Loop startet.
```
```
for( let i = 0; i !== numAnimations; ++ i)
for( let i = 0; i !== numAnimations; ++ i)
...
@@ -232,9 +232,8 @@ Wenn eine action in dem vorher definierten _Wörterbuch_, den baseActions enthal
...
@@ -232,9 +232,8 @@ Wenn eine action in dem vorher definierten _Wörterbuch_, den baseActions enthal
Die animate() Funktion ist das Herzstück von ThreeJs, ohne sie würde nichts dargestellt werden.
Die animate() Funktion ist das Herzstück von ThreeJs, ohne sie würde nichts dargestellt werden. requestAnimationFrame(animate) kreiert eine Schleife, die den darunter stehenden Code bei jeder Bildschirmaktualisierung ein mal ausführt, was in der Regel zu 60 Iterationen pro Sekunde führt. Die Funktion hat dazu den Vorteil, dass sie pausiert, wenn der Nutzer einen anderen Tab öffnet.
`requestAnimationFrame(animate)` kreiert eine Schleife, die den darunter stehenden Code bei jeder Bildschirmaktualisierung ein mal ausführt, was in der Regel zu 60 Iterationen pro Sekunde führt. Die Funktion hat dazu den Vorteil, dass sie pausiert, wenn der Nutzer einen anderen Tab öffnet.
Die unterste Zeile renderer.render( scene, camera ) zeichnet letztendlich die Szene auf den Bildschirm.
Die unterste Zeile `renderer.render( scene, camera )` zeichnet letztendlich die Szene auf den Bildschirm.
Alle Zeilen dazwischen aktualisieren die derzeit abgespielte Animation.
Alle Zeilen dazwischen aktualisieren die derzeit abgespielte Animation.