[3d] fix preview camera not sync up issue (#2747)

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
 

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) {

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)
   }

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

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