Update Animation von Gebärdensprache aus natürlicher Sprache authored by Robin Connor Schramm's avatar Robin Connor Schramm
......@@ -187,7 +187,7 @@ Um ThreeJs zu verwenden, muss der Javascript Code in eine html Datei gehüllt se
<script src="../js/libs/dat.gui.min.js"></script>
<script src="../js/libs/GLTFLoader.js"></script>
<script src="./webgl\_animation\_blending.js"></script>
<script src="./webgl_animation_blending.js"></script>
```
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
```
//Load glb model and initialise all animations
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_
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.
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.
<h4>Laden der Animationen:</h4>
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.
```
for( let i = 0; i !== numAnimations; ++ i)
......@@ -232,9 +232,8 @@ Wenn eine action in dem vorher definierten _Wörterbuch_, den baseActions enthal
```
<h4>[Render Loop: ](https://threejs.org/docs/#manual/en/introduction/Creating-a-scene)</h4>
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.
Die unterste Zeile `renderer.render( scene, camera )` zeichnet letztendlich die Szene auf den Bildschirm.
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.
Die unterste Zeile renderer.render( scene, camera ) zeichnet letztendlich die Szene auf den Bildschirm.
Alle Zeilen dazwischen aktualisieren die derzeit abgespielte Animation.
```
......
......