diff --git a/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts b/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts index 183e0e6494..b6af6a3f97 100644 --- a/app/pages/PageEnigma/datastructures/clips/transform_track_clip.ts +++ b/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, + }); + } +} diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index aec46ad9bf..15cd6b51ca 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/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. diff --git a/app/pages/PageEnigma/js/transform_engine.ts b/app/pages/PageEnigma/js/transform_engine.ts new file mode 100644 index 0000000000..fdcde84830 --- /dev/null +++ b/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; diff --git a/package-lock.json b/package-lock.json index 08b673ca0a..3b9da8ebb3 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 648b3fd799..471a92f1b6 100644 --- a/package.json +++ b/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",