Motion Builder (#677)

app/pages/PageEnigma/Editor/editor.ts

@@ -221,6 +221,7 @@ class Editor {
       "" + this.version,
       this.camera_name,
       this.updateSurfaceIdAttributeToMesh.bind(this),
+      this.version
     );
     this.activeScene.initialize();
     this.generating_preview = false;
@@ -273,6 +274,8 @@ class Editor {
       this.camera_name,
     );
 
+    this.activeScene.timeline = this.timeline;
+
     this.utils = new Utils(this, this.activeScene);
     this.videoGeneration = new VideoGeneration(this);
     this.save_manager = new SaveManager(this);

app/pages/PageEnigma/Editor/scene.ts

@@ -10,6 +10,9 @@ import { LoadingPlaceHolderManager } from "./placeholder_manager";
 import { MMDAnimationHelper, Water } from "three/examples/jsm/Addons.js";
 import { MediaFileType } from "../enums";
 import { ChromaKeyMaterial } from "./chromakey";
+import { TimeLine } from "./timeline";
+import { ClipGroup, ClipType } from "~/enums";
+import { ClipUI } from "../datastructures/clips/clip_ui";
 
 class Scene {
   name: string;
@@ -36,6 +39,8 @@ class Scene {
   updateSurfaceIdAttributeToMesh: Function;
   helper: MMDAnimationHelper;
   ambientLight: THREE.AmbientLight | undefined;
+  timeline: TimeLine | undefined;
+  version: number;
 
   // This is used to ensure we do not rerender or process the video if we already have done so.
   // This allows us to reprompt things quickly. This is only written when a snap shot is taken.
@@ -45,7 +50,9 @@ class Scene {
     name: string,
     camera_name: string,
     updateSurfaceIdAttributeToMesh: Function,
+    version: number,
   ) {
+    this.version = version;
     this.name = name;
     this.gridHelper;
     this.scene = new THREE.Scene();
@@ -647,6 +654,29 @@ class Scene {
 
     if (auto_add) {
       this.scene.add(child_result);
+      if (glb.animations.length > 0) {
+        console.log(glb.animations);
+        const animation = glb.animations[0];
+        child_result.animations = glb.animations;
+        // load first animation
+        this.timeline?.addSelfAnimationClip(
+          new ClipUI(
+            this.version,
+            ClipType.ANIMATION,
+            ClipGroup.CHARACTER,
+            animation.name,
+            "SelfClip",
+            animation.uuid,
+            child_result.uuid,
+            name,
+            0,
+            100,
+            0,
+            MediaFileType.GLB,
+          ),
+          animation,
+        );
+      }
     }
     this.updateSurfaceIdAttributeToMesh(this.scene);
     return child_result;
@@ -739,8 +769,7 @@ class Scene {
         "/resources/skybox/night/Night_Moon_Burst_Cam_1_Back-Z.png",
       ]);
       this.scene.background = texture;
-      if(this.ambientLight)
-        this.scene.remove(this.ambientLight);
+      if (this.ambientLight) this.scene.remove(this.ambientLight);
     } else if (this.skybox == "m_1") {
       const texture = loader.load([
         "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_2_LeftX.png",
@@ -751,13 +780,10 @@ class Scene {
         "/resources/skybox/gray/Sky_AllSky_Overcast4_Low_Cam_1_Back-Z.png",
       ]);
       this.scene.background = texture;
-      if(this.ambientLight)
-        this.scene.remove(this.ambientLight);
+      if (this.ambientLight) this.scene.remove(this.ambientLight);
     } else if (this.skybox == "m_2") {
       this.scene.background = new THREE.Color("#000000");
-      if(this.ambientLight)
-      this.scene.add(this.ambientLight);
-
+      if (this.ambientLight) this.scene.add(this.ambientLight);
     } else {
       const texture = loader.load([
         "/resources/skybox/day/px.png",
@@ -768,8 +794,7 @@ class Scene {
         "/resources/skybox/day/nz.png",
       ]);
       this.scene.background = texture;
-      if(this.ambientLight)
-        this.scene.remove(this.ambientLight);
+      if (this.ambientLight) this.scene.remove(this.ambientLight);
     }
 
     console.log("Backround creation..");
@@ -795,7 +820,7 @@ class Scene {
     const light = new THREE.HemisphereLight(color, 0x8d8d8d, 3.0);
     this.scene.add(light);
 
-    this.ambientLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 3)
+    this.ambientLight = new THREE.AmbientLight(new THREE.Color("#ffffff"), 3);
 
     const directional_light = new THREE.DirectionalLight(color, 2.0);
 

app/pages/PageEnigma/Editor/timeline.ts

@@ -549,6 +549,44 @@ export class TimeLine {
     this.checkEditorCanPlay();
   }
 
+  public async addSelfAnimationClip(data: ClipUI, animation_clip: THREE.AnimationClip) {
+    const object_uuid = data.object_uuid;
+    const media_id = data.media_id;
+    const name = data.name;
+    const group = data.group;
+    const version = 1;
+    const type = data.type;
+    const offset = data.offset;
+    const end_offset = data.length + offset;
+    const object_name =
+      this.scene.get_object_by_uuid(object_uuid)?.name ?? "undefined";
+    const clip_uuid = data.clip_uuid;
+
+    this.animation_engine.load_object(object_uuid, media_id, name);
+    this.animation_engine.clips[object_uuid + media_id].animation_clip = animation_clip;
+    
+    // media id for this as well it can be downloaded
+    this.addPlayableClip(
+      new ClipUI(
+        version,
+        type,
+        group,
+        name,
+        media_id,
+        clip_uuid,
+        object_uuid,
+        object_name,
+        offset,
+        end_offset, // length
+        0,
+        this.scene.get_object_by_uuid(object_uuid)?.userData["media_file_type"],
+      ),
+    );
+
+    this.checkEditorCanPlay();
+    this.updateUI();
+  }
+
   public async deleteKeyFrame(data: Keyframe) {
     const keyframe_uuid = data.keyframe_uuid;
     const object_uuid = data.object_uuid;

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

@@ -129,7 +129,14 @@ export class AnimationClip {
 
   async _get_clip() {
     if (this.animation_clip == null && this.mixer !== null) {
-      this.animation_clip = await this._load_animation();
+      console.log(this.media_id)
+      if(this.media_id === "SelfClip") {
+        const rootObject = this.mixer?.getRoot();
+        if(rootObject)
+          this.animation_clip = (rootObject as THREE.Object3D<THREE.Object3DEventMap>).animations[0];
+      } else {
+        this.animation_clip = await this._load_animation();
+      }
     }
     return this.animation_clip;
   }

app/pages/PageEnigma/proxy/storyteller_proxy_timeline.ts

@@ -89,7 +89,7 @@ export class StoryTellerProxyTimeline {
           element.start_offset,
           element.ending_offset,
           element.keyframe_offset,
-          element.media_file_type
+          element.media_file_type,
         );
         new_clips.push(clip);
       }