From cb6f2e439826c8077141b0d9e45caa9d53bbfb6d Mon Sep 17 00:00:00 2001
From: Terry Jia <terryjia88@gmail.com>
Date: Thu, 27 Feb 2025 08:42:07 -0500
Subject: [PATCH] [3d] fix preview camera not sync up issue (#2747)

---
 src/extensions/core/load3d/CameraManager.ts   |  6 ---
 .../core/load3d/Load3DConfiguration.ts        |  1 -
 src/extensions/core/load3d/Load3d.ts          |  8 ++--
 src/extensions/core/load3d/PreviewManager.ts  | 45 +++++++++++++++++++
 src/extensions/core/load3d/interfaces.ts      |  1 -
 5 files changed, 49 insertions(+), 12 deletions(-)

diff --git a/src/extensions/core/load3d/CameraManager.ts b/src/extensions/core/load3d/CameraManager.ts
index 16d03e2a8..188a85144 100644
--- a/src/extensions/core/load3d/CameraManager.ts
+++ b/src/extensions/core/load3d/CameraManager.ts
@@ -92,12 +92,6 @@ export class CameraManager implements CameraManagerInterface {
       : 'orthographic'
   }
 
-  refreshCamera() {
-    // TODO need to improve the logic here
-    this.toggleCamera()
-    this.toggleCamera()
-  }
-
   toggleCamera(cameraType?: CameraType): void {
     const oldCamera = this.activeCamera
 
diff --git a/src/extensions/core/load3d/Load3DConfiguration.ts b/src/extensions/core/load3d/Load3DConfiguration.ts
index 3ad320f32..11f392fd8 100644
--- a/src/extensions/core/load3d/Load3DConfiguration.ts
+++ b/src/extensions/core/load3d/Load3DConfiguration.ts
@@ -18,7 +18,6 @@ class Load3DConfiguration {
     this.setupModelHandling(modelWidget, loadFolder, cameraState)
     this.setupTargetSize(width, height)
     this.setupDefaultProperties()
-    this.load3d.refreshCamera()
   }
 
   private setupTargetSize(width: IWidget | null, height: IWidget | null) {
diff --git a/src/extensions/core/load3d/Load3d.ts b/src/extensions/core/load3d/Load3d.ts
index 37cee26d7..639d5f954 100644
--- a/src/extensions/core/load3d/Load3d.ts
+++ b/src/extensions/core/load3d/Load3d.ts
@@ -215,6 +215,10 @@ class Load3d {
 
   setCameraState(state: CameraState): void {
     this.cameraManager.setCameraState(state)
+
+    if (this.previewManager.showPreview) {
+      this.previewManager.syncWithMainCamera()
+    }
   }
 
   getCameraState(): CameraState {
@@ -269,10 +273,6 @@ class Load3d {
     this.previewManager.togglePreview(showPreview)
   }
 
-  refreshCamera(): void {
-    this.cameraManager.refreshCamera()
-  }
-
   setTargetSize(width: number, height: number): void {
     this.previewManager.setTargetSize(width, height)
   }
diff --git a/src/extensions/core/load3d/PreviewManager.ts b/src/extensions/core/load3d/PreviewManager.ts
index d63272fa6..471de7572 100644
--- a/src/extensions/core/load3d/PreviewManager.ts
+++ b/src/extensions/core/load3d/PreviewManager.ts
@@ -153,6 +153,51 @@ export class PreviewManager implements PreviewManagerInterface {
     this.previewRenderer?.setSize(this.previewWidth, previewHeight, false)
   }
 
+  syncWithMainCamera(): void {
+    if (!this.previewRenderer || !this.previewContainer || !this.showPreview) {
+      return
+    }
+
+    this.previewCamera = this.getActiveCamera().clone()
+
+    this.previewCamera.position.copy(this.getActiveCamera().position)
+    this.previewCamera.rotation.copy(this.getActiveCamera().rotation)
+
+    const aspect = this.targetWidth / this.targetHeight
+
+    if (this.getActiveCamera() instanceof THREE.OrthographicCamera) {
+      const activeOrtho = this.getActiveCamera() as THREE.OrthographicCamera
+      const previewOrtho = this.previewCamera as THREE.OrthographicCamera
+
+      previewOrtho.zoom = activeOrtho.zoom
+
+      const frustumHeight =
+        (activeOrtho.top - activeOrtho.bottom) / activeOrtho.zoom
+      const frustumWidth = frustumHeight * aspect
+
+      previewOrtho.top = frustumHeight / 2
+      previewOrtho.left = -frustumWidth / 2
+      previewOrtho.right = frustumWidth / 2
+      previewOrtho.bottom = -frustumHeight / 2
+
+      previewOrtho.updateProjectionMatrix()
+    } else {
+      const activePerspective =
+        this.getActiveCamera() as THREE.PerspectiveCamera
+      const previewPerspective = this.previewCamera as THREE.PerspectiveCamera
+
+      previewPerspective.fov = activePerspective.fov
+      previewPerspective.zoom = activePerspective.zoom
+      previewPerspective.aspect = aspect
+
+      previewPerspective.updateProjectionMatrix()
+    }
+
+    this.previewCamera.lookAt(this.getControls().target)
+
+    this.updatePreviewRender()
+  }
+
   updatePreviewRender(): void {
     if (!this.previewRenderer || !this.previewContainer || !this.showPreview)
       return
diff --git a/src/extensions/core/load3d/interfaces.ts b/src/extensions/core/load3d/interfaces.ts
index 28d37cac2..9ae277d56 100644
--- a/src/extensions/core/load3d/interfaces.ts
+++ b/src/extensions/core/load3d/interfaces.ts
@@ -60,7 +60,6 @@ export interface CameraManagerInterface extends BaseManager {
   perspectiveCamera: THREE.PerspectiveCamera
   orthographicCamera: THREE.OrthographicCamera
   getCurrentCameraType(): CameraType
-  refreshCamera(): void
   toggleCamera(cameraType?: CameraType): void
   setFOV(fov: number): void
   setCameraState(state: CameraState): void