feat: Refactor camera controls and view switching; enhance event handling for improved user experience and state management

app/src/modules/scene/camera/camMode.tsx

@@ -10,7 +10,7 @@ import { firstPersonCamera } from "./firstPersonCamera";
 
 const CamMode: React.FC = () => {
     const { camMode, setCamMode } = useCamMode();
-  const [, get] = useKeyboardControls();
+    const [_, get] = useKeyboardControls();
     const [isTransitioning, setIsTransitioning] = useState(false);
     const state: any = useThree();
     const { toggleView } = useToggleView();
@@ -19,9 +19,7 @@ const CamMode: React.FC = () => {
     useEffect(() => {
         const handlePointerLockChange = async () => {
             if (document.pointerLockElement && !toggleView) {
-        // Pointer is locked
             } else if (camMode === "FirstPerson" && !toggleView) {
-        // Pointer is unlocked
                 setCamMode("ThirdPerson");
                 await switchToThirdPerson(state.controls, state.camera);
             }
@@ -30,35 +28,10 @@ const CamMode: React.FC = () => {
         document.addEventListener("pointerlockchange", handlePointerLockChange);
 
         return () => {
-      document.removeEventListener(
+            document.removeEventListener("pointerlockchange", handlePointerLockChange);
-        "pointerlockchange",
-        handlePointerLockChange
-      );
         };
     }, [camMode, toggleView, setCamMode, state.controls, state.camera]);
 
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === "Shift") {
-        setIsShiftActive(true);
-      }
-    };
-
-    const handleKeyUp = (event: KeyboardEvent) => {
-      if (event.key === "Shift") {
-        setIsShiftActive(false);
-      }
-    };
-
-    window.addEventListener("keydown", handleKeyDown);
-    window.addEventListener("keyup", handleKeyUp);
-
-    return () => {
-      window.removeEventListener("keydown", handleKeyDown);
-      window.removeEventListener("keyup", handleKeyUp);
-    };
-  }, []);
-
     useEffect(() => {
         const handleKeyPress = async (event: KeyboardEvent) => {
             if (!state.controls) return;
@@ -75,21 +48,27 @@ const CamMode: React.FC = () => {
                     switchToThirdPerson,
                 });
             }
+
+            if (keyCombination === 'Shift') {
+                setIsShiftActive(true);
+            }
+        };
+
+        const handleKeyUp = (event: KeyboardEvent) => {
+            if (event.key === "Shift") {
+                setIsShiftActive(false);
+            }
         };
 
         window.addEventListener("keydown", handleKeyPress);
+        window.addEventListener("keyup", handleKeyUp);
+
         return () => {
             window.removeEventListener("keydown", handleKeyPress);
+            window.removeEventListener("keyup", handleKeyUp);
         };
         // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
+    }, [camMode, isTransitioning, toggleView, state.controls, state.camera, setCamMode]);
-    camMode,
-    isTransitioning,
-    toggleView,
-    state.controls,
-    state.camera,
-    setCamMode,
-  ]);
 
     useFrame(() => {
         const { forward, backward, left, right } = get();
@@ -99,34 +78,20 @@ const CamMode: React.FC = () => {
         const speedMultiplier = isShiftActive ? 4 : 1;
 
         if (forward) {
-      state.controls.forward(
+            state.controls.forward(CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier, true);
-        CONSTANTS.firstPersonControls.forwardSpeed * speedMultiplier,
-        true
-      );
         }
         if (backward) {
-      state.controls.forward(
+            state.controls.forward(CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier, true);
-        CONSTANTS.firstPersonControls.backwardSpeed * speedMultiplier,
-        true
-      );
         }
         if (left) {
-      state.controls.truck(
+            state.controls.truck(CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier, 0, true);
-        CONSTANTS.firstPersonControls.leftSpeed * speedMultiplier,
-        0,
-        true
-      );
         }
         if (right) {
-      state.controls.truck(
+            state.controls.truck(CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier, 0, true);
-        CONSTANTS.firstPersonControls.rightSpeed * speedMultiplier,
-        0,
-        true
-      );
         }
     });
 
-  return null; // This component does not render any UI
+    return null;
 };
 
 export default CamMode;

app/src/modules/scene/camera/switchView.tsx

@@ -1,73 +1,68 @@
-import * as THREE from "three";
+import { useEffect } from "react";
-import { useEffect, useRef } from "react";
-import { useToggleView } from "../../../store/builder/store";
 import { useThree } from "@react-three/fiber";
-import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+import * as THREE from 'three';
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import { PerspectiveCamera, OrthographicCamera, CameraControls } from '@react-three/drei';
 import { useParams } from "react-router-dom";
+import * as CONSTANTS from '../../../types/world/worldConstants';
+import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
 import { getUserData } from "../../../functions/getUserData";
-import { CameraControls } from "@react-three/drei";
+import { useToggleView } from "../../../store/builder/store";
 
 export default function SwitchView() {
     const { toggleView } = useToggleView();
-  const state: any = useThree();
+    const { controls } = useThree();
-  const { set } = useThree();
-  const perspectiveCamera = useRef<THREE.PerspectiveCamera | null>(null);
-  const orthoCamera = useRef<THREE.OrthographicCamera | null>(null);
-  orthoCamera.current = new THREE.OrthographicCamera(-window.innerWidth / 2, window.innerWidth / 2, window.innerHeight / 2, -window.innerHeight / 2, 0.01, 1000);
-  perspectiveCamera.current = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
     const { projectId } = useParams();
     const { organization } = getUserData();
 
     useEffect(() => {
-    if (!perspectiveCamera.current || !orthoCamera.current) return;
+        if (toggleView && controls) {
-    if (toggleView) {
+            (controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
-      orthoCamera.current.zoom = 10;
+            (controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
-      orthoCamera.current.position.set(...CONSTANTS.twoDimension.defaultPosition);
-      orthoCamera.current.lookAt(new THREE.Vector3(...CONSTANTS.twoDimension.defaultTarget));
-      orthoCamera.current.updateProjectionMatrix();
-      set({ camera: orthoCamera.current });
-      orthoCamera.current.updateProjectionMatrix();
-    } else if (!toggleView) {
-      perspectiveCamera.current.position.set(...CONSTANTS.threeDimension.defaultPosition);
-      perspectiveCamera.current.lookAt(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget));
-      set({ camera: perspectiveCamera.current });
-    }
-  }, [toggleView, set]);
-
-  useEffect(() => {
-    if (toggleView && state.controls) {
-      state.controls.mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
-      state.controls.mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
         } else {
             try {
                 getCamera(organization, localStorage.getItem('userId')!, projectId).then((data) => {
                     if (data && data.position && data.target) {
-            // state.controls?.setLookAt(data.position.x, data.position.y, data.position.z, data.target.x, data.target.y, data.target.z, true)
+                        (controls as CameraControls)?.setPosition(data.position.x, data.position.y, data.position.z);
-            state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
+                        (controls as CameraControls)?.setTarget(data.target.x, data.target.y, data.target.z);
-            state.controls?.setTarget(data.target.x, data.target.y, data.target.z);
                     } else {
-            // state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
+                        (controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
-            state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
+                        (controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
-            state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
                     }
                 });
             } catch (error) {
                 echo.error("Failed to retrieve camera position or target");
-        console.error("Failed to retrieve camera position or target:", error);
+                (controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
-        // state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
+                (controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
-        state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
-        state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
             }
 
-      if (state.controls) {
+            if (controls) {
-        state.controls.mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
+                (controls as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
-        state.controls.mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
+                (controls as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
             }
         }
-  }, [toggleView, state.controls]);
+    }, [toggleView, controls]);
 
     return (
-    <></>
+        <>
+            {toggleView ? (
+                <OrthographicCamera
+                    makeDefault
+                    position={CONSTANTS.twoDimension.defaultPosition}
+                    zoom={10}
+                    near={0.01}
+                    far={1000}
+                    onUpdate={(self) => self.lookAt(new THREE.Vector3(...CONSTANTS.twoDimension.defaultTarget))}
+                />
+            ) : (
+                <PerspectiveCamera
+                    makeDefault
+                    fov={75}
+                    position={CONSTANTS.threeDimension.defaultPosition}
+                    near={0.01}
+                    far={1000}
+                    onUpdate={(self) => self.lookAt(new THREE.Vector3(...CONSTANTS.threeDimension.defaultTarget))}
+                />
+            )}
+        </>
     );
 }

app/src/modules/scene/controls/controls.tsx

@@ -13,16 +13,17 @@ import SelectionControls3D from "./selectionControls/selection3D/selectionContro
 import TransformControl from "./transformControls/transformControls";
 import { useParams } from "react-router-dom";
 import { getUserData } from "../../../functions/getUserData";
+
 import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
 import UndoRedo2DControls from "./undoRedoControls/undoRedo2D/undoRedo2DControls";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
 
+    const state = useThree();
     const { toggleView } = useToggleView();
     const { resetCamera, setResetCamera } = useResetCamera();
     const { socket } = useSocketStore();
-    const state = useThree();
     const { projectId } = useParams();
     const { userId, organization } = getUserData();
 
@@ -33,7 +34,6 @@ export default function Controls() {
         }
 
         getCamera(organization, userId, projectId).then((data) => {
-            // console.log('data: ', data);
             if (data && data.position && data.target) {
                 controlsRef.current?.setPosition(data.position.x, data.position.y, data.position.z);
                 controlsRef.current?.setTarget(data.target.x, data.target.y, data.target.z);
@@ -41,8 +41,7 @@ export default function Controls() {
                 controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
                 controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
             }
-        })
+        }).catch((error) => console.error("Failed to fetch camera data:", error));
-            .catch((error) => console.error("Failed to fetch camera data:", error));
     }, []);
 
     useEffect(() => {
@@ -60,7 +59,6 @@ export default function Controls() {
                 socketId: socket.id,
                 projectId
             };
-            // console.log('CameracamData: ', camData);
             socket.emit('v1:Camera:set', camData)
 
             setResetCamera(false);
@@ -130,7 +128,7 @@ export default function Controls() {
                 camera={state.camera}
                 verticalDragToForward={true}
                 boundaryEnclosesCamera={true}
-                dollyToCursor={toggleView}
+                dollyDragInverted
             >
 
                 <SwitchView />

app/src/modules/scene/controls/selectionControls/selection3D/selectionControls3D.tsx

@@ -333,6 +333,7 @@ const SelectionControls3D: React.FC = () => {
 
     return (
         <>
+
             <MoveControls3D movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
 
             <RotateControls3D rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} />
@@ -340,6 +341,7 @@ const SelectionControls3D: React.FC = () => {
             <DuplicationControls3D duplicatedObjects={duplicatedObjects} setDuplicatedObjects={setDuplicatedObjects} setpastedObjects={setpastedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
 
             <CopyPasteControls3D copiedObjects={copiedObjects} setCopiedObjects={setCopiedObjects} pastedObjects={pastedObjects} setpastedObjects={setpastedObjects} setDuplicatedObjects={setDuplicatedObjects} movedObjects={movedObjects} setMovedObjects={setMovedObjects} rotatedObjects={rotatedObjects} setRotatedObjects={setRotatedObjects} boundingBoxRef={boundingBoxRef} />
+
         </>
     );
 };

app/src/types/world/worldConstants.ts

@@ -206,7 +206,7 @@ export const thirdPersonControls: ThirdPersonControls = {
     polarRotateSpeed: 1, // Speed of rotation around the polar axis
     truckSpeed: 2, // Speed of truck movement
     maxDistance: 100, // Maximum distance from the target
-    maxPolarAngle: Math.PI / 2 - 0.05, // Maximum polar angle
+    maxPolarAngle: Math.PI / 2, // Maximum polar angle
     minZoom: 6, // Minimum zoom level
     maxZoom: 100, // Maximum zoom level
     targetOffset: 20, // Offset of the target from the camera