diff --git a/app/pages/PageEnigma/PageEnigma.tsx b/app/pages/PageEnigma/PageEnigma.tsx index e536ff8f89..1a1efaf667 100644 --- a/app/pages/PageEnigma/PageEnigma.tsx +++ b/app/pages/PageEnigma/PageEnigma.tsx @@ -56,6 +56,9 @@ export const PageEnigma = () => { editorRef.current?.save(); } + const handleButtonCameraView = ()=> { + editorRef.current?.change_camera_view(); + } return(
@@ -79,7 +82,7 @@ export const PageEnigma = () => {
- + = 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, diff --git a/app/pages/PageEnigma/js/editor.js b/app/pages/PageEnigma/js/editor.js index 15cd6b51ca..e3ad081539 100644 --- a/app/pages/PageEnigma/js/editor.js +++ b/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. diff --git a/app/pages/PageEnigma/js/scene.js b/app/pages/PageEnigma/js/scene.js index 6bce7fde1f..c624baddab 100644 --- a/app/pages/PageEnigma/js/scene.js +++ b/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() { diff --git a/app/pages/PageEnigma/js/transform_engine.ts b/app/pages/PageEnigma/js/transform_engine.ts index fdcde84830..5afb2190c3 100644 --- a/app/pages/PageEnigma/js/transform_engine.ts +++ b/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); } }