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