37 lines
1.4 KiB
TypeScript
37 lines
1.4 KiB
TypeScript
import { CameraControls } from "@react-three/drei";
|
|
import { useRef } from "react";
|
|
import { useFrame, useThree } from "@react-three/fiber";
|
|
import * as CONSTANTS from '../../../types/world/worldConstants';
|
|
|
|
import { useDuplicatedCamData, useToggleView } from "../../../store/builder/store";
|
|
|
|
export default function ControlsDuplicate() {
|
|
const controlsRef = useRef<CameraControls>(null);
|
|
const { toggleView } = useToggleView();
|
|
const state = useThree();
|
|
const { duplicatedCamData } = useDuplicatedCamData();
|
|
|
|
useFrame(() => {
|
|
controlsRef.current?.setPosition(...duplicatedCamData.camPosition, true);
|
|
controlsRef.current?.setTarget(...duplicatedCamData.camTarget, true);
|
|
})
|
|
|
|
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>
|
|
</>
|
|
);
|
|
} |