Keyframe transform done!

app/pages/PageEnigma/PageEnigma.tsx

@@ -56,6 +56,9 @@ export const PageEnigma = () => {
     editorRef.current?.save();
   }
 
+  const handleButtonCameraView = ()=> {
+    editorRef.current?.change_camera_view();
+  }
 
   return(
     <div>
@@ -79,7 +82,7 @@ export const PageEnigma = () => {
       <canvas ref={canvasRef} id="video-scene" width="1280px" height="720px" />
       <div className='fixed top-20 left-4'>
         <div className="flex mt-2 gap-2">
-          <Button variant="secondary">Toggle Camera View</Button>
+          <Button variant="secondary" onClick={handleButtonCameraView}>Toggle Camera View</Button>
           <Button variant="secondary" onClick={handleButtonSave}>Save Scene</Button>
           <ButtonDialogue
             buttonProps={{

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

@@ -1,5 +1,5 @@
+import { faL } from '@fortawesome/pro-solid-svg-icons';
 import * as THREE from 'three';
-import TWEEN from '@tweenjs/tween.js';
 
 export interface TransformTrackClip {
   version: number;
@@ -20,9 +20,8 @@ export class TransformTrackClip implements TransformTrackClip {
   scales: THREE.Vector3[];
   length: number;
 
-  current_pos: THREE.Vector3;
-
-  playing: boolean;
+  step_frame: number;
+  looping: boolean;
 
   constructor(version: number, media_id: string, length: number) {
     this.version = version;
@@ -35,27 +34,29 @@ export class TransformTrackClip implements TransformTrackClip {
     this.rotations = [];
     this.scales = [];
 
-    this.playing = false;
-
-    this.current_pos = new THREE.Vector3(0, 0, 0);
+    this.step_frame = 0;
+    this.looping = false;
   }
 
-  update(object: THREE.Object3D) {
-    if (this.playing) {
-      this.tweenPositions();
-      object.position.set(this.current_pos.x, this.current_pos.y, this.current_pos.z);
-    }
+  step(object: THREE.Object3D) {
+    if (this.step_frame >= 60/this.length && this.looping == false) { return; } // Reached max frames.
+    if(this.positions.length < 2) { return; } // If there are enough points in the scene.
+    this.step_frame += 1;
+    const curve = new THREE.CatmullRomCurve3(this.positions);
+    const point = curve.getPoint((this.step_frame/60)*this.length);
+    object.position.copy(point);
   }
 
   reset(object: THREE.Object3D) {
     if (this.positions.length > 0) {
       let first_pos = this.positions[0];
-      object.position.set(first_pos.x, first_pos.y, first_pos.z);
+      object.position.copy(first_pos);
+      this.step_frame = 0;
     }
   }
 
   add_position(position: THREE.Vector3) {
-    this.positions.push(position);
+    this.positions.push(new THREE.Vector3(position.x, position.y, position.z));
   }
 
   remove_position(position: THREE.Vector3) {
@@ -64,19 +65,6 @@ export class TransformTrackClip implements TransformTrackClip {
     });
   }
 
-  tweenPositions() {
-    const tweenDuration = this.length / this.positions.length;
-
-    this.positions.reduce((prevPosition, currentPosition, index) => {
-      const tween = new TWEEN.Tween(prevPosition)
-        .to({ x: currentPosition.x, y: currentPosition.y, z: currentPosition.z }, tweenDuration)
-        .onUpdate(() => {
-          this.current_pos = new THREE.Vector3(prevPosition.x, prevPosition.y, prevPosition.z);
-        });
-      return currentPosition;
-    }, this.current_pos.clone());
-  }
-
   toJSON(): string {
     return JSON.stringify({
       version: this.version,

app/pages/PageEnigma/js/editor.js

@@ -15,6 +15,7 @@ import { BokehPass } from 'three/addons/postprocessing/BokehPass.js';
 import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
 
 import AudioEngine from './audio_engine.ts';
+import TransformEngine from './transform_engine.ts';
 
 if (typeof window !== 'undefined') {
     import('ccapture.js').then(module => {
@@ -34,6 +35,7 @@ class Editor {
         this.can_initailize = false;
         let one_element = document.getElementById("created-one-element");
         //if (one_element != null) { return; }
+        this.can_initailize = true;
         let newElement = document.createElement("div");
         newElement.id = "created-one-element";
         document.body.appendChild(newElement);
@@ -84,11 +86,16 @@ class Editor {
         // Audio Engine Test.
 
         this.audio_engine = new AudioEngine();
+        this.transform_engine = new TransformEngine();
+
+        this.test_box_uuid = null;
+        this.current_frame = 0;
+        this.test_playback = false;
     }
 
     // Initializes the main scene and ThreeJS essentials.
     initialize() {
-        //if (this.can_initailize == false) { return; }
+        if (this.can_initailize == false) { return; }
         // Gets the canvas.
         this.canvReference = document.getElementById("video-scene");
         // Base width and height.
@@ -125,7 +132,10 @@ class Editor {
         // Creates the main update loop.
         this.renderer.setAnimationLoop(this.update_loop.bind(this));
         
-        
+        this.test_box_uuid = this.activeScene.instantiate("Box");
+        this.transform_engine.loadObject(this.test_box_uuid);
+
+        this.test_playback = false;
     }
 
     // Configure post processing.
@@ -207,7 +217,21 @@ class Editor {
         //this.activeScene.scene.remove(this.activeScene.gridHelper);
         //this.save_manager.save(this.activeScene.scene, this._save_to_cloud.bind(this), this.audio_manager, this.timeline, this.activeScene.animations);
         //this.activeScene._createGrid();
-        this.audio_engine.playClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg");
+        //this.audio_engine.playClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg");
+        //console.log(this.selected);
+        
+        if(this.selected == null) {return;}
+        this.transform_engine.addFrame(this.selected)
+        console.log(this.transform_engine.clips);
+    }
+
+    change_camera_view() {
+        //let obj = this.activeScene.get_object_by_uuid(this.test_box_uuid);
+        //this.transform_engine.clips[this.test_box_uuid].step(obj);
+        //console.log(this.transform_engine.clips[this.test_box_uuid].current_pos)
+        //this.current_frame += 1;
+        this.test_playback = !this.test_playback;
+        this.transform_engine.clips[this.test_box_uuid].reset(this.activeScene.get_object_by_uuid(this.test_box_uuid));
     }
 
     _save_to_cloud(blob) {
@@ -301,6 +325,12 @@ class Editor {
         this.activeScene.update(this.clock.getDelta());
         //this.orbit.update(0.1);
 
+        //console.log(this.transform_engine.clips[this.test_box_uuid]);
+
+        if (this.test_playback) {
+            this.transform_engine.clips[this.test_box_uuid].step(this.activeScene.get_object_by_uuid(this.test_box_uuid));
+        }
+
         this.render_scene();
         if (this.capturer != null) { this.capturer.capture(this.renderer.domElement); } // Record scene.
 

app/pages/PageEnigma/js/scene.js

@@ -10,9 +10,7 @@ class Scene {
         this.name = name;
         this.gridHelper = null;
         this.scene = new THREE.Scene();
-        this.animated_items = {};
         this.activeItem = null;
-        this.animations = [];
     }
 
     initialize() {
@@ -46,37 +44,15 @@ class Scene {
         //obj.type = "Object3D";
         obj.name = name;
         this.scene.add(obj);
+        return obj.uuid;
+    }
+
+    get_object_by_uuid(uuid) {
+        return this.scene.getObjectByProperty('uuid', uuid);
     }
 
     update(delta) {
-        for (let [key, value] of Object.entries(this.animated_items)) {
-            this.animated_items[key].update(delta);
-        }
-    }
-
-    create_character(filepath) {
-        // Add check to make sure the character does not exist already HERE PLEASE!!
-
-        let animated = new AnimatedItem();
-        animated.load(filepath, this.setup_character.bind(this))
-    }
-
-    create_fresh_animated_item(uuid) {
-        // Add check to make sure the character does not exist already HERE PLEASE!!
-        let animated = new AnimatedItem(uuid);
-        this.animated_items[animated.name] = animated;
-    }
-
-    setup_character(character_uuid, children, animated) {
-        this.animated_items[character_uuid] = animated;
-        console.log(character_uuid)
-        let children_uuids = [];
-        children.forEach(child => {
-            this.scene.add(child);
-            children_uuids.push(child.uuid);
-        });
-        this.animated_items[character_uuid].load_animation("/resources/models/pose/walking.glb", this.play_anim_demo.bind(this));
-        //this.animated_items[character_name].load_animation("/resources/models/fox/fox_idle.glb", this.play_anim_demo.bind(this));
+        
     }
 
     _disable_skybox() {

app/pages/PageEnigma/js/transform_engine.ts

@@ -1,5 +1,5 @@
 import { TransformTrackClip } from "../datastructures/clips/transform_track_clip";
-
+import * as THREE from 'three';
 
 class TransformEngine {
     clips: { [key: string]: TransformTrackClip } = {};
@@ -12,26 +12,15 @@ class TransformEngine {
         this.clips = {};
     }
 
-    loadObject(object_uuid: string) {
-        this.clips[object_uuid] = new TransformTrackClip(this.version, object_uuid, length);
+    loadObject(object_uuid: string, clip_length:number = 2) {
+        this.clips[object_uuid] = new TransformTrackClip(this.version, object_uuid, clip_length);
     }
 
-    playClip(object_uuid: string) {
-        const clip = this.clips[object_uuid];
-        if (clip) {
-            clip
-        } else {
-            console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`);
-        }
-    }
-
-    stopClip(object_uuid: string) {
-        const clip = this.clips[object_uuid];
-        if (clip) {
-            // Disable stepping and reset.
-        } else {
-            console.warn(`TransformEngine: TransformClip with id "${object_uuid}" not found.`);
+    addFrame(object: THREE.Object3D, clip_length:number = 2) {
+        if(this.clips[object.uuid] == null) {
+            this.clips[object.uuid] = new TransformTrackClip(this.version, object.uuid, clip_length);
         }
+        this.clips[object.uuid].add_position(object.position);
     }
 }