69 lines
1.5 KiB
TypeScript
69 lines
1.5 KiB
TypeScript
import { useEffect, useRef } from "react";
|
|
import { OrbitControls } from "@react-three/drei";
|
|
import type { OrbitControls as OrbitControlsImpl } from "three-stdlib";
|
|
import { Debug } from "@/debug/Debug";
|
|
|
|
export function DebugCameraControls(): React.JSX.Element {
|
|
const controls = useRef<OrbitControlsImpl | null>(null);
|
|
|
|
useEffect(() => {
|
|
const debug = Debug.getInstance();
|
|
|
|
if (!debug.active || !controls.current) {
|
|
return undefined;
|
|
}
|
|
|
|
const folder = debug.createFolder("Camera");
|
|
|
|
if (!folder) {
|
|
return undefined;
|
|
}
|
|
|
|
const target = controls.current.target;
|
|
const cameraState = {
|
|
targetX: target.x,
|
|
targetY: target.y,
|
|
targetZ: target.z,
|
|
};
|
|
|
|
const syncTarget = (): void => {
|
|
if (!controls.current) {
|
|
return;
|
|
}
|
|
|
|
controls.current.target.set(
|
|
cameraState.targetX,
|
|
cameraState.targetY,
|
|
cameraState.targetZ,
|
|
);
|
|
controls.current.update();
|
|
};
|
|
|
|
folder
|
|
.add(cameraState, "targetX", -100, 100, 0.1)
|
|
.name("Target X")
|
|
.onChange(syncTarget);
|
|
folder
|
|
.add(cameraState, "targetY", -20, 50, 0.1)
|
|
.name("Target Y")
|
|
.onChange(syncTarget);
|
|
folder
|
|
.add(cameraState, "targetZ", -100, 100, 0.1)
|
|
.name("Target Z")
|
|
.onChange(syncTarget);
|
|
|
|
return undefined;
|
|
}, []);
|
|
|
|
return (
|
|
<OrbitControls
|
|
ref={controls}
|
|
enableDamping
|
|
dampingFactor={0.08}
|
|
minDistance={20}
|
|
maxDistance={220}
|
|
target={[0, 12, 0]}
|
|
/>
|
|
);
|
|
}
|