basics of transform engine.

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

@@ -1,49 +1,90 @@
 import * as THREE from 'three';
+import TWEEN from '@tweenjs/tween.js';
 
 export interface TransformTrackClip {
   version: number;
-  media_id: number;
+  media_id: string;
   type: "transform";
-  position: THREE.Vector3[];
-  rotation: THREE.Vector3[];
-  scale: THREE.Vector3[];
+  positions: THREE.Vector3[];
+  rotations: THREE.Vector3[];
+  scales: THREE.Vector3[];
+  length: number;
 }
 
-export class TransformTrackClipClass implements TransformTrackClip {
-    version: number;
-    media_id: number;
-    type: "transform";
-    position: THREE.Vector3[];
-    rotation: THREE.Vector3[];
-    scale: THREE.Vector3[];
-  
-    constructor(version: number, media_id: number, position: THREE.Vector3[], rotation: THREE.Vector3[], scale: THREE.Vector3[]) {
-      this.version = version;
-      this.media_id = media_id;
-      this.type = "transform";
-      this.position = position;
-      this.rotation = rotation;
-      this.scale = scale;
-    }
+export class TransformTrackClip implements TransformTrackClip {
+  version: number;
+  media_id: string;
+  type: "transform";
+  positions: THREE.Vector3[];
+  rotations: THREE.Vector3[];
+  scales: THREE.Vector3[];
+  length: number;
 
-    add_position(position: THREE.Vector3) {
-      this.position.push(position);
-    }
+  current_pos: THREE.Vector3;
 
-    remove_position(position: THREE.Vector3) {
-      this.position = this.position.filter(position => {
-        return !position.equals(position);
-      });
-    }
-  
-    toJSON(): string {
-      return JSON.stringify({
-        version: this.version,
-        media_id: this.media_id,
-        type: this.type,
-        position: this.position,
-        rotation: this.rotation,
-        scale: this.scale,
-      });
+  playing: boolean;
+
+  constructor(version: number, media_id: string, length: number) {
+    this.version = version;
+    this.media_id = media_id;
+    this.type = "transform";
+
+    this.length = length;
+
+    this.positions = [];
+    this.rotations = [];
+    this.scales = [];
+
+    this.playing = false;
+
+    this.current_pos = new THREE.Vector3(0, 0, 0);
+  }
+
+  update(object: THREE.Object3D) {
+    if (this.playing) {
+      this.tweenPositions();
+      object.position.set(this.current_pos.x, this.current_pos.y, this.current_pos.z);
     }
   }
+
+  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);
+    }
+  }
+
+  add_position(position: THREE.Vector3) {
+    this.positions.push(position);
+  }
+
+  remove_position(position: THREE.Vector3) {
+    this.positions = this.positions.filter(positions => {
+      return !position.equals(position);
+    });
+  }
+
+  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,
+      media_id: this.media_id,
+      type: this.type,
+      position: this.positions,
+      rotation: this.rotations,
+      scale: this.scales,
+    });
+  }
+}

app/pages/PageEnigma/js/editor.js

@@ -124,7 +124,8 @@ class Editor {
         this.onWindowResize();
         // Creates the main update loop.
         this.renderer.setAnimationLoop(this.update_loop.bind(this));
-        this.audio_engine.loadClip("m_f7jnwt3d1ddchatdk5vaqt0n4mb1hg");
+        
+        
     }
 
     // Configure post processing.

app/pages/PageEnigma/js/transform_engine.ts

@@ -0,0 +1,38 @@
+import { TransformTrackClip } from "../datastructures/clips/transform_track_clip";
+
+
+class TransformEngine {
+    clips: { [key: string]: TransformTrackClip } = {};
+    version: number;
+    length: number;
+
+    constructor(version: number, length: number) {
+        this.version = version;
+        this.length = length;
+        this.clips = {};
+    }
+
+    loadObject(object_uuid: string) {
+        this.clips[object_uuid] = new TransformTrackClip(this.version, object_uuid, 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.`);
+        }
+    }
+}
+
+export default TransformEngine;

package-lock.json

@@ -22,6 +22,7 @@
         "@remix-run/react": "^2.8.1",
         "@remix-run/router": "^1.15.3",
         "@remix-run/serve": "^2.8.1",
+        "@tweenjs/tween.js": "^18.6.4",
         "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
         "isbot": "^4.1.0",
         "react": "^18.2.0",
@@ -2254,10 +2255,9 @@
       }
     },
     "node_modules/@tweenjs/tween.js": {
-      "version": "23.1.1",
-      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz",
-      "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==",
-      "dev": true
+      "version": "18.6.4",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-18.6.4.tgz",
+      "integrity": "sha512-lB9lMjuqjtuJrx7/kOkqQBtllspPIN+96OvTCeJ2j5FEzinoAXTdAMFnDAQT1KVPRlnYfBrqxtqP66vDM40xxQ=="
     },
     "node_modules/@types/acorn": {
       "version": "4.0.6",
@@ -2417,6 +2417,12 @@
         "meshoptimizer": "~0.18.1"
       }
     },
+    "node_modules/@types/three/node_modules/@tweenjs/tween.js": {
+      "version": "23.1.1",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.1.tgz",
+      "integrity": "sha512-ZpboH7pCPPeyBWKf8c7TJswtCEQObFo3bOBYalm99NzZarATALYCo5OhbCa/n4RQyJyHfhkdx+hNrdL5ByFYDw==",
+      "dev": true
+    },
     "node_modules/@types/unist": {
       "version": "2.0.10",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.10.tgz",

package.json

@@ -28,6 +28,7 @@
     "@remix-run/react": "^2.8.1",
     "@remix-run/router": "^1.15.3",
     "@remix-run/serve": "^2.8.1",
+    "@tweenjs/tween.js": "^18.6.4",
     "ccapture.js": "github:aceslowman/ccapture.js#npm-fix",
     "isbot": "^4.1.0",
     "react": "^18.2.0",