From b9189e8cbc29aae93bc25ce5bcb9622df22deea7 Mon Sep 17 00:00:00 2001
From: Aaron Chong <aaronchongth@gmail.com>
Date: Mon, 12 Aug 2024 16:43:30 +0800
Subject: [PATCH] Setting camera target to most negative number to handle
 arbitrary large maps (#993)

* Setting camera target to 10km instead of 1 to handle much larger maps

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Dynamically set camera target, refactor to reduce camera and controls creation

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

* Use fixed value negative max number instead

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>

---------

Signed-off-by: Aaron Chong <aaronchongth@gmail.com>
---
 .../components/three-fiber/camera-control.tsx | 43 ++++++++++---------
 1 file changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/dashboard/src/components/three-fiber/camera-control.tsx b/packages/dashboard/src/components/three-fiber/camera-control.tsx
index 5ac09ad5e..e65229a9d 100644
--- a/packages/dashboard/src/components/three-fiber/camera-control.tsx
+++ b/packages/dashboard/src/components/three-fiber/camera-control.tsx
@@ -18,21 +18,40 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
   const controlsRef = useRef<OrbitControls | null>(null);
 
   useEffect(() => {
+    const controls = new OrbitControls(camera, gl.domElement);
+    controls.target = new Vector3(0, 0, -Number.MAX_SAFE_INTEGER);
+    controls.enableRotate = false;
+    controls.enableDamping = false;
+    controls.enableZoom = true;
+    controls.mouseButtons = {
+      LEFT: MOUSE.PAN,
+      MIDDLE: undefined,
+      RIGHT: undefined,
+    };
+    controlsRef.current = controls;
+
     const subs: Subscription[] = [];
     subs.push(
       AppEvents.zoomIn.subscribe(() => {
-        AppEvents.zoom.next(camera.zoom * DEFAULT_ZOOM_IN_CONSTANT);
+        const newZoom = camera.zoom * DEFAULT_ZOOM_IN_CONSTANT;
+        camera.zoom = newZoom;
+        AppEvents.zoom.next(newZoom);
+        camera.updateProjectionMatrix();
       }),
     );
     subs.push(
       AppEvents.zoomOut.subscribe(() => {
-        AppEvents.zoom.next(camera.zoom * DEFAULT_ZOOM_OUT_CONSTANT);
+        const newZoom = camera.zoom * DEFAULT_ZOOM_OUT_CONSTANT;
+        camera.zoom = newZoom;
+        AppEvents.zoom.next(newZoom);
+        camera.updateProjectionMatrix();
       }),
     );
     subs.push(
       AppEvents.resetCamera.subscribe((data) => {
         camera.position.set(data[0], data[1], data[2]);
         camera.zoom = data[3];
+        AppEvents.zoom.next(data[3]);
         camera.updateProjectionMatrix();
       }),
     );
@@ -58,22 +77,12 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
         sub.unsubscribe();
       }
       gl.domElement.removeEventListener('wheel', handleScroll);
+      controls.dispose();
     };
   }, [camera, gl.domElement]);
 
   useEffect(() => {
-    const controls = new OrbitControls(camera, gl.domElement);
-    controls.target = new Vector3(0, 0, -1000);
-    controls.enableRotate = false;
-    controls.enableDamping = false;
-    controls.enableZoom = true;
     camera.zoom = zoom;
-    controls.mouseButtons = {
-      LEFT: MOUSE.PAN,
-      MIDDLE: undefined,
-      RIGHT: undefined,
-    };
-
     if (AppEvents.cameraPosition.value) {
       camera.position.set(
         AppEvents.cameraPosition.value.x,
@@ -81,13 +90,7 @@ export const CameraControl: React.FC<CameraControlProps> = ({ zoom }) => {
         AppEvents.cameraPosition.value.z,
       );
     }
-
-    controlsRef.current = controls;
-
-    return () => {
-      controls.dispose();
-    };
-  }, [camera, gl.domElement, zoom]);
+  }, [camera, zoom]);
 
   useFrame(() => {
     if (controlsRef.current) {