From 7ba591f83c10e24a2fbae4ed2185b055fc5c5672 Mon Sep 17 00:00:00 2001 From: Quicksticks-oss Date: Sat, 6 Apr 2024 22:12:26 -0400 Subject: [PATCH] added transform markers for the viewport to give a more finished look. --- .../datastructures/clips/transform_clip.ts | 2 +- app/pages/PageEnigma/js/editor.ts | 13 +++++++----- app/pages/PageEnigma/js/scene.ts | 21 +++++++++++++++++-- app/pages/PageEnigma/js/timeline.ts | 3 +++ .../proxy/storyteller_proxy_scene.ts | 3 +++ 5 files changed, 34 insertions(+), 8 deletions(-) diff --git a/app/pages/PageEnigma/datastructures/clips/transform_clip.ts b/app/pages/PageEnigma/datastructures/clips/transform_clip.ts index 21c0d05bc2..6864b16be4 100644 --- a/app/pages/PageEnigma/datastructures/clips/transform_clip.ts +++ b/app/pages/PageEnigma/datastructures/clips/transform_clip.ts @@ -85,7 +85,7 @@ export class TransformClip { this.step_frame = frame - offset; //if (this.step_frame < 0) { this.step_frame = 0; } //if (this.step_frame >= this.length) { return; } // Reached max frames. - if (this.keyframes.length < 2) { return; } // If there are enough points in the scene. + if (this.keyframes.length < 1) { return; } // If there are enough points in the scene. // Find the current and next keyframes based on time_frame let { currentKeyframe, nextKeyframe } = this.findNextNumber(this.step_frame); diff --git a/app/pages/PageEnigma/js/editor.ts b/app/pages/PageEnigma/js/editor.ts index 8f0b9a98c8..8871bd25fa 100644 --- a/app/pages/PageEnigma/js/editor.ts +++ b/app/pages/PageEnigma/js/editor.ts @@ -447,6 +447,8 @@ class Editor { this.current_scene_media_token, ); + console.log(result); + this.dispatchAppUiState({ type: APPUI_ACTION_TYPES.HIDE_EDITOR_LOADER, }); @@ -554,11 +556,6 @@ class Editor { this.cameraViewControls.enabled = true; } this.cam_obj.scale.set(0, 0, 0); - if (this.activeScene.hot_items) { - this.activeScene.hot_items.forEach((element) => { - element.visible = false; - }); - } this.removeTransformControls(); this.selected = this.cam_obj; @@ -1025,6 +1022,11 @@ class Editor { startPlayback() { this.timeline.is_playing = true; this.timeline.scrubber_frame_position = 0; + if (this.activeScene.hot_items) { + this.activeScene.hot_items.forEach((element) => { + element.visible = false; + }); + } if (!this.camera_person_mode) { this.switchCameraView(); } @@ -1137,6 +1139,7 @@ class Editor { this.raycaster.setFromCamera(this.mouse, this.camera); const interactable: any[] = []; this.activeScene.scene.children.forEach((child: THREE.Object3D) => { + console.log(child); if (child.name != "") { if (child.type == "Mesh" || child.type == "Object3D") { interactable.push(child); diff --git a/app/pages/PageEnigma/js/scene.ts b/app/pages/PageEnigma/js/scene.ts index 66e3c44b54..427e7f6ff0 100644 --- a/app/pages/PageEnigma/js/scene.ts +++ b/app/pages/PageEnigma/js/scene.ts @@ -61,16 +61,33 @@ class Scene { return this.scene.getObjectByName(name); } - createPoint(pos: THREE.Vector3, visable: boolean = true) { + createPoint(pos: THREE.Vector3, keyframe_uuid: string): THREE.Object3D { let geometry = new THREE.SphereGeometry(0.1, 18, 12); let material = new THREE.MeshBasicMaterial({ color: 0x05C3DD }); let obj = new THREE.Mesh(geometry, material); obj.position.copy(pos); - obj.receiveShadow = visable; + obj.receiveShadow = false; + obj.castShadow = false; + obj.userData['media_id'] = "Point::" + keyframe_uuid; if (this.hot_items != undefined) { this.hot_items.push(obj); } this.scene.add(obj); + return obj; + } + + deletePoint(keyframe_uuid: string) { + this.scene.traverse((object) => { + if (object.userData.media_id) { + let obj_keyframe_uuid = object.userData.media_id.replace("Point::", ""); + console.log(obj_keyframe_uuid); + if (obj_keyframe_uuid === keyframe_uuid) { + console.log("Found!", object); + this.scene.remove(object); + return; + } + } + }); } _disable_skybox() { diff --git a/app/pages/PageEnigma/js/timeline.ts b/app/pages/PageEnigma/js/timeline.ts index fbe285ec02..c05436b5c3 100644 --- a/app/pages/PageEnigma/js/timeline.ts +++ b/app/pages/PageEnigma/js/timeline.ts @@ -171,6 +171,8 @@ export class TimeLine { 0, this.absolute_end)) } + + this.scene.createPoint(data_json['position'], data_json['keyframe_uuid']); } public async addClip(data: any) { @@ -230,6 +232,7 @@ export class TimeLine { let keyframe_uuid = data['data']["keyframe_uuid"]; let object_uuid = data['data']['object_uuid']; this.transform_engine.clips[object_uuid].removeKeyframe(keyframe_uuid); + this.scene.deletePoint(keyframe_uuid); } public async updateKeyFrame(data: any) { diff --git a/app/pages/PageEnigma/proxy/storyteller_proxy_scene.ts b/app/pages/PageEnigma/proxy/storyteller_proxy_scene.ts index eec868b2e2..c5fdddc1d9 100644 --- a/app/pages/PageEnigma/proxy/storyteller_proxy_scene.ts +++ b/app/pages/PageEnigma/proxy/storyteller_proxy_scene.ts @@ -67,6 +67,9 @@ export class StoryTellerProxyScene { default: if(token.includes('m_')){ obj = await this.scene.load_glb(token); + } else if(token.includes('Point::')){ + let keyframe_uuid = token.replace("Point::", ""); + obj = this.scene.createPoint(new THREE.Vector3(0,0,0), keyframe_uuid); } break; }