animation timeline stuff.

app/pages/PageEnigma/datastructures/clips/animation_track_clip.ts

@@ -1,3 +1,4 @@
+import { faL } from '@fortawesome/pro-solid-svg-icons';
 import * as THREE from 'three';
 import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';
 
@@ -13,16 +14,17 @@ export interface AnimationTrackClip {
 }
 
 export class AnimationTrackClip implements AnimationTrackClip {
-  version: number
-  media_id: string // comes from the server
-  object_uuid: string
-  type: "animation"
-  location: "glb" | "remote"
-  speed: number
-  length: number
-  clip_name: string
-  mixer: THREE.AnimationMixer | undefined
+  version: number;
+  media_id: string; // comes from the server
+  object_uuid: string;
+  type: "animation";
+  location: "glb" | "remote";
+  speed: number;
+  length: number;
+  clip_name: string;
+  mixer: THREE.AnimationMixer | undefined;
   animation_clip: THREE.AnimationClip | undefined;
+  clip_action: THREE.AnimationAction | undefined;
 
   constructor(
     version: number,
@@ -43,13 +45,14 @@ export class AnimationTrackClip implements AnimationTrackClip {
     this.clip_name = clip_name;
     this.animation_clip;
     this.mixer;
+    this.clip_action;
   }
 
   // Takes a glb animation loads from the server  
   _load_animation(url: string): Promise<THREE.AnimationClip> {
     return new Promise((resolve) => {
       const glbLoader = new GLTFLoader();
-  
+
       glbLoader.load(
         url,
         (gltf) => {
@@ -61,7 +64,6 @@ export class AnimationTrackClip implements AnimationTrackClip {
     });
   }
 
-
   _create_mixer(object: THREE.Object3D) {
     this.mixer = new THREE.AnimationMixer(object);
   }
@@ -75,8 +77,15 @@ export class AnimationTrackClip implements AnimationTrackClip {
 
   async play(object: THREE.Object3D) {
     if (this.mixer == null) { this._create_mixer(object) }
+
     let anim_clip = await this._get_clip();
-    this.mixer?.clipAction(anim_clip);
+    this.clip_action = this.mixer?.clipAction(anim_clip);
+    if (this.clip_action) {
+      if (this.clip_action?.isRunning() == false) {
+        this.clip_action.play();
+      }
+    }
+
   }
 
   step(deltatime: number) {
@@ -84,6 +93,10 @@ export class AnimationTrackClip implements AnimationTrackClip {
     this.mixer?.update(deltatime);
   }
 
+  stop() {
+    this.mixer?.stopAllAction();
+  }
+
   toJSON(): string {
     return JSON.stringify({
       version: this.version,

app/pages/PageEnigma/js/animation_engine.ts

@@ -21,14 +21,6 @@ export class AnimationEngine {
             1.0, 1.0, 
             clip_name);
     }
-
-    play(object: THREE.Object3D) {
-        this.clips[object.uuid].play(object);
-    }
-
-    stop(media_id: string) {
-
-    }
 }
 
 export default AnimationEngine;

app/pages/PageEnigma/js/editor.js

@@ -278,7 +278,7 @@ class Editor {
 
         //console.log(this.transform_engine.clips[this.test_box_uuid]);
 
-        this.timeline.update();
+        this.timeline.update(this.clock.getDelta());
 
         this.render_scene();
         if (this.capturer != null) { this.capturer.capture(this.renderer.domElement); } // Record scene.

app/pages/PageEnigma/js/timeline.ts

@@ -132,7 +132,7 @@ export class TimeLine {
     }
 
     // called by the editor update loop on each frame
-    async update() {
+    async update(deltatime:number) {
         if (this.isPlaying == false) return; // start and stop 
 
         if (this.scrubberPosition <= 0) {
@@ -170,7 +170,10 @@ export class TimeLine {
 
                 else if (element.type == "animation") {
                     let object = this.scene.get_object_by_uuid(element.object_uuid);
-                    if (object) { this.animationEngine.play(object); }
+                    if (object) { 
+                        await this.animationEngine.clips[object.uuid].play(object); 
+                        this.animationEngine.clips[object.uuid].step(deltatime);
+                    }
                 }
                 else {
                     this.stop()