From 7825efd46849d3347694c8d2f59bf917fb8612b8 Mon Sep 17 00:00:00 2001 From: bflatastic Date: Sat, 12 Apr 2025 01:14:45 +0700 Subject: [PATCH] fix camera stuff --- .../app/pages/PageEnigma/Editor/editor.ts | 123 ------------------ .../app/pages/PageEnigma/Editor/scene.ts | 2 +- .../PreviewEngineCamera.tsx | 7 + .../app/pages/PageEnigma/signals/camera.ts | 5 +- 4 files changed, 12 insertions(+), 125 deletions(-) diff --git a/frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts b/frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts index cc6762d188..900c3c5ef4 100644 --- a/frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts +++ b/frontend/apps/editor3d/app/pages/PageEnigma/Editor/editor.ts @@ -197,8 +197,6 @@ class Editor { processingHasFailed: boolean; stats: Stats; - cameras: Map = new Map(); - constructor() { this.processingHasFailed = false; console.log( @@ -329,34 +327,6 @@ class Editor { if (this.engineFrameBuffers.frameWorkerManager) { this.engineFrameBuffers.frameWorkerManager.type = imageFormat; } - - // Initialize cameras from signals - cameras.value.forEach((camData) => { - const camera = new THREE.PerspectiveCamera( - camData.fov, - this.getRenderDimensions().aspectRatio, - 0.01, - 200, - ); - camera.position.set( - camData.position.x, - camData.position.y, - camData.position.z, - ); - camera.rotation.set( - camData.rotation.x, - camData.rotation.y, - camData.rotation.z, - ); - this.cameras.set(camData.id, camera); - }); - - // Set initial camera - this.camera = this.cameras.get("main") || null; - this.render_camera = this.camera; - - // Subscribe to camera changes - this.setupCameraSignalHandlers(); } // Add helper method to convert focal length to FOV @@ -365,99 +335,6 @@ class Editor { return 2 * Math.atan(sensorHeight / (2 * focalLength)) * (180 / Math.PI); } - setupCameraSignalHandlers() { - // Handle camera selection changes - selectedCameraId.subscribe((id) => { - const newCamera = this.cameras.get(id); - if (newCamera) { - this.camera = newCamera; - this.render_camera = newCamera; - - // Update camera properties in signals - const camData = cameras.value.find((c) => c.id === id); - if (camData) { - // Convert focal length to FOV - const fov = this.focalLengthToFov(camData.focalLength); - newCamera.fov = fov; - newCamera.updateProjectionMatrix(); - this.renderScene(); // Force a render update - } - } - }); - - // Handle camera updates - cameras.subscribe((newCameras) => { - newCameras.forEach((camData) => { - let camera = this.cameras.get(camData.id); - - // Create new camera if it doesn't exist - if (!camera) { - const fov = this.focalLengthToFov(camData.focalLength); - camera = new THREE.PerspectiveCamera( - fov, - this.getRenderDimensions().aspectRatio, - 0.01, - 200, - ); - this.cameras.set(camData.id, camera); - } - - // Update camera properties - camera.position.set( - camData.position.x, - camData.position.y, - camData.position.z, - ); - camera.rotation.set( - camData.rotation.x, - camData.rotation.y, - camData.rotation.z, - ); - - // Update FOV based on focal length - const fov = this.focalLengthToFov(camData.focalLength); - camera.fov = fov; - camera.updateProjectionMatrix(); - - // Force a render update if this is the active camera - if (camData.id === selectedCameraId.value) { - this.renderScene(); - } - }); - - // Clean up deleted cameras - const currentIds = new Set(newCameras.map((c) => c.id)); - for (const [id] of this.cameras.entries()) { - if (!currentIds.has(id) && id !== "main") { - this.cameras.delete(id); - } - } - }); - } - - // Update camera position in signals when it changes - updateCameraPosition() { - if (this.camera && selectedCameraId.value) { - const pos = this.camera.position; - const rot = this.camera.rotation; - - const camData = cameras.value.find( - (c) => c.id === selectedCameraId.value, - ); - if (camData) { - cameras.value = cameras.value.map((c) => - c.id === selectedCameraId.value - ? { - ...c, - position: { x: pos.x, y: pos.y, z: pos.z }, - rotation: { x: rot.x, y: rot.y, z: rot.z }, - } - : c, - ); - } - } - } - getRenderDimensions() { switch (this.render_camera_aspect_ratio) { case CameraAspectRatio.HORIZONTAL_16_9: { diff --git a/frontend/apps/editor3d/app/pages/PageEnigma/Editor/scene.ts b/frontend/apps/editor3d/app/pages/PageEnigma/Editor/scene.ts index fe790f0400..9f9fd59215 100644 --- a/frontend/apps/editor3d/app/pages/PageEnigma/Editor/scene.ts +++ b/frontend/apps/editor3d/app/pages/PageEnigma/Editor/scene.ts @@ -374,7 +374,7 @@ class Scene { // TODO(bt,2025-02-10): Make the local dev assets more configurable or seedable. const camera_id = GetFrontendEnvironment().getIsLocalDev() - ? "m_4djqzq89mbn6sdbbqm25ks6drhr55k" // Local development + ? "m_cxh4asqhapdz10j880755dg4yevshb" // Local development : "m_cxh4asqhapdz10j880755dg4yevshb"; // Production const camera_obj = await this.loadGlbWithPlaceholder( diff --git a/frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx b/frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx index 2bacf2c6ce..50ba63144c 100644 --- a/frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx +++ b/frontend/apps/editor3d/app/pages/PageEnigma/comps/PreviewEngineCamera/PreviewEngineCamera.tsx @@ -24,16 +24,19 @@ import { CameraAspectRatio, EditorStates } from "~/pages/PageEnigma/enums"; import { CameraViewCanvas } from "~/pages/PageEnigma/comps/EngineCanvases"; import { Button, ButtonIcon, Tooltip } from "~/components"; +import { useEffect } from "react"; export const PreviewEngineCamera = () => { useSignals(); const handleButtonCameraView = () => { + console.log("Camera view button clicked"); Queue.publish({ queueName: QueueNames.TO_ENGINE, action: toEngineActions.TOGGLE_CAMERA_STATE, data: null, }); + console.log("Action published to queue"); }; const getLargeScreenHeightClass = () => { @@ -67,6 +70,10 @@ export const PreviewEngineCamera = () => { } }; + useEffect(() => { + console.log("Editor state changed:", editorState.value); + }, [editorState.value]); + return (
([ @@ -15,8 +16,9 @@ export const cameras = signal([ label: "Main View", focalLength: 17, fov: 70, - position: { x: 2.5, y: 2.5, z: -2.5 }, + position: { x: -2.5, y: 2.5, z: 2.5 }, rotation: { x: 0, y: 0, z: 0 }, + lookAt: { x: 0, y: 0, z: 0 }, }, { id: "cam2", @@ -25,6 +27,7 @@ export const cameras = signal([ fov: 70, position: { x: -2.5, y: 2.5, z: 2.5 }, rotation: { x: 0, y: 0, z: 0 }, + lookAt: { x: 0, y: 0, z: 0 }, }, ]);