Dwinzo-Beta/Dwinzo_Demo
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

file and folder structure changed

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-08-26 13:15:53 +05:30
parent bb2a27e2f9
commit 0387d7a932
7 changed files with 161 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
app/src/modules/scene/camera/camMode.tsx
View File

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

78
app/src/modules/scene/camera/firstPersonCamera.ts → app/src/modules/scene/camera/functions/firstPersonCamera.ts
View File

@@ -1,39 +1,39 @@
import * as CONSTANTS from "../../../types/world/worldConstants"; import * as CONSTANTS from "../../../../types/world/worldConstants";
interface FirstPersonCameraProps { interface FirstPersonCameraProps {
setIsTransitioning?: (value: boolean) => void; setIsTransitioning?: (value: boolean) => void;
state: any; state: any;
} }
interface FirstPersonCameraParams extends FirstPersonCameraProps { interface FirstPersonCameraParams extends FirstPersonCameraProps {
camMode: string; camMode: string;
setCamMode: (mode: string) => void; setCamMode: (mode: string) => void;
switchToFirstPerson: (controls: any, camera: any) => Promise<void>; switchToFirstPerson: (controls: any, camera: any) => Promise<void>;
switchToThirdPerson: (controls: any, camera: any) => Promise<void>; switchToThirdPerson: (controls: any, camera: any) => Promise<void>;
} }
export async function firstPersonCamera({ export async function firstPersonCamera({
setIsTransitioning, setIsTransitioning,
state, state,
camMode, camMode,
setCamMode, setCamMode,
switchToFirstPerson, switchToFirstPerson,
switchToThirdPerson switchToThirdPerson
}: FirstPersonCameraParams): Promise<void> { }: FirstPersonCameraParams): Promise<void> {
setIsTransitioning && setIsTransitioning(true); setIsTransitioning && setIsTransitioning(true);
state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse; state.controls.mouseButtons.left = CONSTANTS.controlsTransition.leftMouse;
state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse; state.controls.mouseButtons.right = CONSTANTS.controlsTransition.rightMouse;
state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse; state.controls.mouseButtons.wheel = CONSTANTS.controlsTransition.wheelMouse;
state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse; state.controls.mouseButtons.middle = CONSTANTS.controlsTransition.middleMouse;
if (camMode === "ThirdPerson") { if (camMode === "ThirdPerson") {
setCamMode("FirstPerson"); setCamMode("FirstPerson");
await switchToFirstPerson(state.controls, state.camera); await switchToFirstPerson(state.controls, state.camera);
} else if (camMode === "FirstPerson") { } else if (camMode === "FirstPerson") {
setCamMode("ThirdPerson"); setCamMode("ThirdPerson");
await switchToThirdPerson(state.controls, state.camera); await switchToThirdPerson(state.controls, state.camera);
} }
setIsTransitioning && setIsTransitioning(false); setIsTransitioning && setIsTransitioning(false);
} }

48
app/src/modules/scene/camera/switchToFirstPerson.ts → app/src/modules/scene/camera/functions/switchToFirstPerson.ts
View File

@@ -1,25 +1,25 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as CONSTANTS from '../../../types/world/worldConstants'; import * as CONSTANTS from '../../../../types/world/worldConstants';
export default async function switchToFirstPerson( export default async function switchToFirstPerson(
controls: any, controls: any,
camera: any camera: any
) { ) {
if (!controls) return; if (!controls) return;
const cameraDirection = new THREE.Vector3(); const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection); camera.getWorldDirection(cameraDirection);
cameraDirection.normalize(); cameraDirection.normalize();
await controls.setPosition(camera.position.x, 2, camera.position.z, true); await controls.setPosition(camera.position.x, 2, camera.position.z, true);
controls.setTarget(camera.position.x, 2, camera.position.z, true); controls.setTarget(camera.position.x, 2, camera.position.z, true);
controls.mouseButtons.left = CONSTANTS.firstPersonControls.leftMouse; controls.mouseButtons.left = CONSTANTS.firstPersonControls.leftMouse;
controls.lockPointer(); controls.lockPointer();
controls.azimuthRotateSpeed = CONSTANTS.firstPersonControls.azimuthRotateSpeed; controls.azimuthRotateSpeed = CONSTANTS.firstPersonControls.azimuthRotateSpeed;
controls.polarRotateSpeed = CONSTANTS.firstPersonControls.polarRotateSpeed; controls.polarRotateSpeed = CONSTANTS.firstPersonControls.polarRotateSpeed;
controls.truckSpeed = CONSTANTS.firstPersonControls.truckSpeed; controls.truckSpeed = CONSTANTS.firstPersonControls.truckSpeed;
controls.minDistance = CONSTANTS.firstPersonControls.minDistance; controls.minDistance = CONSTANTS.firstPersonControls.minDistance;
controls.maxDistance = CONSTANTS.firstPersonControls.maxDistance; controls.maxDistance = CONSTANTS.firstPersonControls.maxDistance;
controls.maxPolarAngle = CONSTANTS.firstPersonControls.maxPolarAngle; controls.maxPolarAngle = CONSTANTS.firstPersonControls.maxPolarAngle;
} }

56
app/src/modules/scene/camera/switchToThirdPerson.ts → app/src/modules/scene/camera/functions/switchToThirdPerson.ts
View File

@@ -1,29 +1,29 @@
import * as THREE from 'three'; import * as THREE from 'three';
import * as CONSTANTS from '../../../types/world/worldConstants'; import * as CONSTANTS from '../../../../types/world/worldConstants';
export default async function switchToThirdPerson( export default async function switchToThirdPerson(
controls: any, controls: any,
camera: any camera: any
) { ) {
if (!controls) return; if (!controls) return;
controls.mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse; controls.mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
controls.mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse; controls.mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
controls.mouseButtons.middle = CONSTANTS.thirdPersonControls.middleMouse; controls.mouseButtons.middle = CONSTANTS.thirdPersonControls.middleMouse;
controls.mouseButtons.wheel = CONSTANTS.thirdPersonControls.wheelMouse; controls.mouseButtons.wheel = CONSTANTS.thirdPersonControls.wheelMouse;
controls.unlockPointer(); controls.unlockPointer();
const cameraDirection = new THREE.Vector3(); const cameraDirection = new THREE.Vector3();
camera.getWorldDirection(cameraDirection); camera.getWorldDirection(cameraDirection);
const targetOffset = cameraDirection.multiplyScalar(CONSTANTS.thirdPersonControls.targetOffset); const targetOffset = cameraDirection.multiplyScalar(CONSTANTS.thirdPersonControls.targetOffset);
const targetPosition = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z).add(targetOffset); const targetPosition = new THREE.Vector3(camera.position.x, camera.position.y, camera.position.z).add(targetOffset);
controls.setPosition(camera.position.x, CONSTANTS.thirdPersonControls.cameraHeight, camera.position.z, true); controls.setPosition(camera.position.x, CONSTANTS.thirdPersonControls.cameraHeight, camera.position.z, true);
controls.setTarget(targetPosition.x, 0, targetPosition.z, true); controls.setTarget(targetPosition.x, 0, targetPosition.z, true);
controls.azimuthRotateSpeed = CONSTANTS.thirdPersonControls.azimuthRotateSpeed; controls.azimuthRotateSpeed = CONSTANTS.thirdPersonControls.azimuthRotateSpeed;
controls.polarRotateSpeed = CONSTANTS.thirdPersonControls.polarRotateSpeed; controls.polarRotateSpeed = CONSTANTS.thirdPersonControls.polarRotateSpeed;
controls.truckSpeed = CONSTANTS.thirdPersonControls.truckSpeed; controls.truckSpeed = CONSTANTS.thirdPersonControls.truckSpeed;
controls.minDistance = CONSTANTS.threeDimension.minDistance; controls.minDistance = CONSTANTS.threeDimension.minDistance;
controls.maxDistance = CONSTANTS.thirdPersonControls.maxDistance; controls.maxDistance = CONSTANTS.thirdPersonControls.maxDistance;
controls.maxPolarAngle = CONSTANTS.thirdPersonControls.maxPolarAngle; controls.maxPolarAngle = CONSTANTS.thirdPersonControls.maxPolarAngle;
} }

52
app/src/modules/scene/camera/updateCameraPosition.ts → app/src/modules/scene/camera/functions/updateCameraPosition.ts
View File

@@ -1,26 +1,26 @@
import { Socket } from "socket.io-client"; import { Socket } from "socket.io-client";
import * as THREE from "three"; import * as THREE from "three";
import { getUserData } from "../../../functions/getUserData"; import { getUserData } from "../../../../functions/getUserData";
export default function updateCamPosition( export default function updateCamPosition(
controls: any, controls: any,
socket: Socket, socket: Socket,
position: THREE.Vector3, position: THREE.Vector3,
rotation: THREE.Euler, rotation: THREE.Euler,
projectId?: string projectId?: string
) { ) {
const { userId, organization } = getUserData(); const { userId, organization } = getUserData();
if (!controls.current) return; if (!controls.current) return;
const target = controls.current.getTarget(new THREE.Vector3()); const target = controls.current.getTarget(new THREE.Vector3());
const camData = { const camData = {
organization, organization,
userId: userId, userId: userId,
position: position, position: position,
target: new THREE.Vector3(target.x, 0, target.z), target: new THREE.Vector3(target.x, 0, target.z),
rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z), rotation: new THREE.Vector3(rotation.x, rotation.y, rotation.z),
socketId: socket.id, socketId: socket.id,
projectId, projectId,
}; };
socket.emit("v1:Camera:set", camData); socket.emit("v1:Camera:set", camData);
} }

37
app/src/hooks/useCameraShortcuts.ts → app/src/modules/scene/camera/shortcutsControls/cameraShortcutsControls.tsx
View File

@@ -3,20 +3,24 @@ import { useThree } from "@react-three/fiber";
import * as THREE from "three"; import * as THREE from "three";
import type { CameraControls } from "@react-three/drei"; import type { CameraControls } from "@react-three/drei";
export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>) => { const CameraShortcutsControls = () => {
const { camera } = useThree(); const { camera, controls } = useThree();
useEffect(() => { useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => { 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(); const target = new THREE.Vector3();
controlsRef.current.getTarget(target); cc.getTarget(target);
const distance = camera.position.distanceTo(target); const distance = camera.position.distanceTo(target);
let pos: THREE.Vector3 | null = null; let pos: THREE.Vector3 | null = null;
const dir = new THREE.Vector3().subVectors(camera.position, target).normalize();
switch (e.key) { switch (e.key) {
case "1": // Front case "1": // Front
pos = new THREE.Vector3(0, 0, distance).add(target); pos = new THREE.Vector3(0, 0, distance).add(target);
@@ -27,13 +31,24 @@ export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>)
case "7": // Top case "7": // Top
pos = new THREE.Vector3(0, distance, 0).add(target); pos = new THREE.Vector3(0, distance, 0).add(target);
break; 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; break;
}
} }
if (pos) { if (pos) {
controlsRef.current.setLookAt( cc.setLookAt(
pos.x, pos.y, pos.z, // camera position pos.x, pos.y, pos.z, // camera position
target.x, target.y, target.z, // keep same target target.x, target.y, target.z, // keep same target
true // smooth transition true // smooth transition
@@ -43,5 +58,9 @@ export const useCameraShortcuts = (controlsRef: React.RefObject<CameraControls>)
window.addEventListener("keydown", handleKeyDown); window.addEventListener("keydown", handleKeyDown);
return () => window.removeEventListener("keydown", handleKeyDown); return () => window.removeEventListener("keydown", handleKeyDown);
}, [controlsRef, camera]); }, [controls, camera]);
return null;
}; };
export default CameraShortcutsControls;

21
app/src/modules/scene/controls/controls.tsx
View File

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