54 lines
2.3 KiB
TypeScript
54 lines
2.3 KiB
TypeScript
|
import { CameraControls } from "@react-three/drei";
|
||
|
|
import { useRef, useEffect } from "react";
|
||
|
|
import { useThree } from "@react-three/fiber";
|
||
|
|
import * as CONSTANTS from '../../../types/world/worldConstants';
|
||
|
|
|
||
|
|
import { useToggleView } from "../../../store/builder/store";
|
||
|
|
import { getCamera } from "../../../services/factoryBuilder/camera/getCameraApi";
|
||
|
|
|
||
|
|
export default function ControlsDuplicate({ projectId }: { projectId: string }) {
|
||
|
|
const controlsRef = useRef<CameraControls>(null);
|
||
|
|
|
||
|
|
const { toggleView } = useToggleView();
|
||
|
|
const state = useThree();
|
||
|
|
|
||
|
|
useEffect(() => {
|
||
|
|
if (controlsRef.current) {
|
||
|
|
(controlsRef.current as any).mouseButtons.left = CONSTANTS.thirdPersonControls.leftMouse;
|
||
|
|
(controlsRef.current as any).mouseButtons.right = CONSTANTS.thirdPersonControls.rightMouse;
|
||
|
|
}
|
||
|
|
const email = localStorage.getItem("email");
|
||
|
|
const organization = email!.split("@")[1].split(".")[0];
|
||
|
|
const userId = localStorage.getItem("userId")!;
|
||
|
|
|
||
|
|
getCamera(organization, userId, projectId).then((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);
|
||
|
|
} else {
|
||
|
|
controlsRef.current?.setPosition(...CONSTANTS.threeDimension.defaultPosition);
|
||
|
|
controlsRef.current?.setTarget(...CONSTANTS.threeDimension.defaultTarget);
|
||
|
|
}
|
||
|
|
})
|
||
|
|
.catch((error) => console.error("Failed to fetch camera data:", error));
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<CameraControls
|
||
|
|
makeDefault
|
||
|
|
ref={controlsRef}
|
||
|
|
minDistance={toggleView ? CONSTANTS.twoDimension.minDistance : CONSTANTS.threeDimension.minDistance}
|
||
|
|
maxDistance={CONSTANTS.thirdPersonControls.maxDistance}
|
||
|
|
minZoom={CONSTANTS.thirdPersonControls.minZoom}
|
||
|
|
maxZoom={CONSTANTS.thirdPersonControls.maxZoom}
|
||
|
|
maxPolarAngle={CONSTANTS.thirdPersonControls.maxPolarAngle}
|
||
|
|
camera={state.camera}
|
||
|
|
verticalDragToForward={true}
|
||
|
|
boundaryEnclosesCamera={true}
|
||
|
|
dollyToCursor={toggleView}
|
||
|
|
>
|
||
|
|
</CameraControls>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
}
|