file and folder structure changed

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

@@ -1,12 +1,13 @@
 import { useFrame, useThree } from "@react-three/fiber";
 import React, { useEffect, useState } from "react";
+import { useKeyboardControls } from "@react-three/drei";
 import * as CONSTANTS from "../../../types/world/worldConstants";
 import { useCamMode, useToggleView } from "../../../store/builder/store";
-import { useKeyboardControls } from "@react-three/drei";
+
-import switchToThirdPerson from "./switchToThirdPerson";
+import switchToThirdPerson from "./functions/switchToThirdPerson";
-import switchToFirstPerson from "./switchToFirstPerson";
+import switchToFirstPerson from "./functions/switchToFirstPerson";
 import { detectModifierKeys } from "../../../utils/shortcutkeys/detectModifierKeys";
-import { firstPersonCamera } from "./firstPersonCamera";
+import { firstPersonCamera } from "./functions/firstPersonCamera";
 
 const CamMode: React.FC = () => {
     const { camMode, setCamMode } = useCamMode();

app/src/modules/scene/camera/functions/firstPersonCamera.ts

@@ -1,4 +1,4 @@
-import * as CONSTANTS from "../../../types/world/worldConstants";
+import * as CONSTANTS from "../../../../types/world/worldConstants";
 
 interface FirstPersonCameraProps {
     setIsTransitioning?: (value: boolean) => void;

app/src/modules/scene/camera/functions/switchToFirstPerson.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from '../../../../types/world/worldConstants';
 
 export default async function switchToFirstPerson(
     controls: any,

app/src/modules/scene/camera/functions/switchToThirdPerson.ts

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import * as CONSTANTS from '../../../types/world/worldConstants';
+import * as CONSTANTS from '../../../../types/world/worldConstants';
 
 export default async function switchToThirdPerson(
     controls: any,

app/src/modules/scene/camera/functions/updateCameraPosition.ts

@@ -1,6 +1,6 @@
 import { Socket } from "socket.io-client";
 import * as THREE from "three";
-import { getUserData } from "../../../functions/getUserData";
+import { getUserData } from "../../../../functions/getUserData";
 
 export default function updateCamPosition(
   controls: any,

app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx

@@ -3,20 +3,24 @@ import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import type { CameraControls } from "@react-three/drei";
 
-export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>) => {
+const CameraShortcutsControls = () => {
-    const { camera } = useThree();
+    const { camera, controls } = useThree();
 
     useEffect(() => {
         const handleKeyDown = (e: KeyboardEvent) => {
-            if (!controlsRef.current) return;
+            if (!controls) return;
 
-            // get current distance from camera to target
+            const cc = controls as CameraControls;
+
+            // get current target
             const target = new THREE.Vector3();
-            controlsRef.current.getTarget(target);
+            cc.getTarget(target);
 
             const distance = camera.position.distanceTo(target);
             let pos: THREE.Vector3 | null = null;
 
+            const dir = new THREE.Vector3().subVectors(camera.position, target).normalize();
+
             switch (e.key) {
                 case "1": // Front
                     pos = new THREE.Vector3(0, 0, distance).add(target);
@@ -27,13 +31,24 @@ export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>)
                 case "7": // Top
                     pos = new THREE.Vector3(0, distance, 0).add(target);
                     break;
-                case "9": // Back
+                case "9": {
-                    pos = new THREE.Vector3(0, 0, -distance).add(target);
+                    // Opposite view logic
+                    if (Math.abs(dir.z) > Math.abs(dir.x) && Math.abs(dir.z) > Math.abs(dir.y)) {
+                        // Currently looking Front/Back → flip Z
+                        pos = new THREE.Vector3(0, 0, -Math.sign(dir.z) * distance).add(target);
+                    } else if (Math.abs(dir.x) > Math.abs(dir.z) && Math.abs(dir.x) > Math.abs(dir.y)) {
+                        // Currently looking Right/Left → flip X
+                        pos = new THREE.Vector3(-Math.sign(dir.x) * distance, 0, 0).add(target);
+                    } else {
+                        // Currently looking Top/Bottom → stay Top
+                        pos = new THREE.Vector3(0, distance, 0).add(target);
+                    }
                     break;
                 }
+            }
 
             if (pos) {
-                controlsRef.current.setLookAt(
+                cc.setLookAt(
                     pos.x, pos.y, pos.z, // camera position
                     target.x, target.y, target.z, // keep same target
                     true // smooth transition
@@ -43,5 +58,9 @@ export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>)
 
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [controlsRef, camera]);
+    }, [controls, camera]);
+
+    return null;
 };
+
+export default CameraShortcutsControls;

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

@@ -3,22 +3,22 @@ import { useRef, useEffect } from "react";
 import { useThree } from "@react-three/fiber";
 import * as THREE from "three";
 import * as CONSTANTS from '../../../types/world/worldConstants';
-
 import { useSocketStore, useToggleView, useResetCamera } from "../../../store/builder/store";
-import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+
-import updateCamPosition from "../camera/updateCameraPosition";
 import CamMode from "../camera/camMode";
 import SwitchView from "../camera/switchView";
-import SelectionControls3D from "./selectionControls/selection3D/selectionControls3D";
-import TransformControl from "./transformControls/transformControls";
-import { useParams } from "react-router-dom";
-import { getUserData } from "../../../functions/getUserData";
-
 import ContextControls from "./contextControls/contextControls";
+import TransformControl from "./transformControls/transformControls";
 import SelectionControls2D from "./selectionControls/selection2D/selectionControls2D";
+import SelectionControls3D from "./selectionControls/selection3D/selectionControls3D";
 import UndoRedo2DControls from "./undoRedoControls/undoRedo2D/undoRedo2DControls";
 import UndoRedo3DControls from "./undoRedoControls/undoRedo3D/undoRedo3DControls";
-import { useCameraShortcuts } from "../../../hooks/useCameraShortcuts";
+import CameraShortcutsControls from "../camera/shortcutsControls/cameraShortcutsControls";
+
+import { useParams } from "react-router-dom";
+import { getUserData } from "../../../functions/getUserData";
+import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
+import updateCamPosition from "../camera/functions/updateCameraPosition";
 
 export default function Controls() {
     const controlsRef = useRef<CameraControls>(null);
@@ -117,7 +117,6 @@ export default function Controls() {
             stopInterval();
         };
     }, [toggleView, state, socket]);
-    useCameraShortcuts(controlsRef);
 
     return (
         <>
@@ -140,6 +139,8 @@ export default function Controls() {
 
                 <CamMode />
 
+                <CameraShortcutsControls/>
+
             </CameraControls>
 
             <SelectionControls3D />