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

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

Browse Source
This commit is contained in:
Jerald-Golden-B
2025-07-31 13:38:50 +05:30
parent 3cfde617cc
commit 5b62f54769
5 changed files with 135 additions and 175 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
app/src/modules/scene/camera/switchView.tsx
View File

@@ -1,73 +1,68 @@
import * as THREE from "three";
import { useEffect, useRef } from "react";
import { useToggleView } from "../../../store/builder/store";
import { useEffect } from "react";
import { useThree } from "@react-three/fiber";
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
import * as CONSTANTS from '../../../types/world/worldConstants';
import * as THREE from 'three';
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 { 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();
const { toggleView } = useToggleView();
const { controls } = useThree();
const { projectId } = useParams();
const { organization } = getUserData();
useEffect(() => {
if (!perspectiveCamera.current || !orthoCamera.current) return;
if (toggleView) {
orthoCamera.current.zoom = 10;
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 && controls) {
(controls as any).mouseButtons.left = CONSTANTS.twoDimension.leftMouse;
(controls as any).mouseButtons.right = CONSTANTS.twoDimension.rightMouse;
} else {
try {
getCamera(organization, localStorage.getItem('userId')!, projectId).then((data) => {
if (data && data.position && data.target) {
(controls as CameraControls)?.setPosition(data.position.x, data.position.y, data.position.z);
(controls as CameraControls)?.setTarget(data.target.x, data.target.y, data.target.z);
} else {
(controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
(controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
}
});
} catch (error) {
echo.error("Failed to retrieve camera position or target");
(controls as CameraControls)?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
(controls as CameraControls)?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
}
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)
state.controls?.setPosition(data.position.x, data.position.y, data.position.z);
state.controls?.setTarget(data.target.x, data.target.y, data.target.z);
} else {
// state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
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);
// state.controls?.setLookAt(...CONSTANTS.threeDimension.defaultPosition, ...CONSTANTS.threeDimension.defaultTarget, true);
state.controls?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
state.controls?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
}
if (controls) {
(controls as any).mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
(controls as any).mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
}
}
}, [toggleView, controls]);
if (state.controls) {
state.controls.mouseButtons.left = CONSTANTS.threeDimension.leftMouse;
state.controls.mouseButtons.right = CONSTANTS.threeDimension.rightMouse;
}
}
}, [toggleView, state.controls]);
return (
<></>
);
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))}
/>
)}
</>
);
}