Setting camera target to most negative number to handle arbitrary lar…

…ge maps (#993) * Setting camera target to 10km instead of 1 to handle much larger maps Signed-off-by: Aaron Chong <[email protected]> * Dynamically set camera target, refactor to reduce camera and controls creation Signed-off-by: Aaron Chong <[email protected]> * Use fixed value negative max number instead Signed-off-by: Aaron Chong <[email protected]> --------- Signed-off-by: Aaron Chong <[email protected]>
open-rmf · Aug 12, 2024 · b9189e8 · b9189e8
1 parent 0fdcc8a
commit b9189e8
Showing 1 changed file with 23 additions and 20 deletions.
diff --git 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,36 +77,20 @@ 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,
         AppEvents.cameraPosition.value.y,
         AppEvents.cameraPosition.value.z,
       );
     }
-
-    controlsRef.current = controls;
-
-    return () => {
-      controls.dispose();
-    };
-  }, [camera, gl.domElement, zoom]);
+  }, [camera, zoom]);
 
   useFrame(() => {
     if (controlsRef.current) {