94 lines
4.0 KiB
TypeScript
94 lines
4.0 KiB
TypeScript
import { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useFrame, useThree } from "@react-three/fiber";
|
|
import * as THREE from "three";
|
|
import { useSelectedZoneStore } from "../../../store/useZoneStore";
|
|
import { useEditPosition, usezonePosition, usezoneTarget } from "../../../store/store";
|
|
|
|
export default function ZoneCentreTarget() {
|
|
const { selectedZone, setSelectedZone } = useSelectedZoneStore();
|
|
const [previousZoneCentre, setPreviousZoneCentre] = useState<number[] | null>(null);
|
|
const sphereRef = useRef<THREE.Mesh>(null);
|
|
const { camera, controls }: any = useThree();
|
|
const { zonePosition, setZonePosition } = usezonePosition();
|
|
const { zoneTarget, setZoneTarget } = usezoneTarget();
|
|
const { Edit, setEdit } = useEditPosition();
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
if (
|
|
selectedZone.zoneViewPortTarget &&
|
|
JSON.stringify(previousZoneCentre) !== JSON.stringify(selectedZone.zoneViewPortTarget)
|
|
) {
|
|
setPreviousZoneCentre(selectedZone.zoneViewPortTarget);
|
|
}
|
|
}, [selectedZone.zoneViewPortTarget, previousZoneCentre]);
|
|
|
|
const centrePoint = useMemo(() => {
|
|
if (!previousZoneCentre || !selectedZone.zoneViewPortTarget) return null;
|
|
return previousZoneCentre.map((value, index) =>
|
|
(value + selectedZone.zoneViewPortTarget[index]) / 2
|
|
);
|
|
}, [previousZoneCentre, selectedZone.zoneViewPortTarget]);
|
|
|
|
useEffect(() => {
|
|
if (selectedZone.zoneName !== "") {
|
|
if (sphereRef.current) {
|
|
sphereRef.current.position.set(selectedZone.zoneViewPortTarget[0], selectedZone.zoneViewPortTarget[1], selectedZone.zoneViewPortTarget[2]);
|
|
}
|
|
if (centrePoint) {
|
|
|
|
if (centrePoint.length > 0) {
|
|
|
|
// let camPosition = new THREE.Vector3(...selectedZone.zoneViewPortPosition);
|
|
// let CamTarget = new THREE.Vector3(...selectedZone.zoneViewPortTarget);
|
|
|
|
// const direction = new THREE.Vector3().subVectors(CamTarget, camPosition).normalize();
|
|
|
|
// const worldUp = new THREE.Vector3(0, 0, 1);
|
|
// const right = new THREE.Vector3().crossVectors(worldUp, direction).normalize();
|
|
// const up = new THREE.Vector3().crossVectors(direction, right).normalize();
|
|
// const offsetPosition = up.clone().multiplyScalar(20);
|
|
// camPosition.add(offsetPosition);
|
|
|
|
const setCam = async () => {
|
|
controls.setLookAt(centrePoint[0], 100, centrePoint[2], ...centrePoint, true);
|
|
setTimeout(() => {
|
|
controls?.setLookAt(
|
|
...selectedZone.zoneViewPortPosition,
|
|
selectedZone.zoneViewPortTarget[0],
|
|
selectedZone.zoneViewPortTarget[1],
|
|
selectedZone.zoneViewPortTarget[2],
|
|
true
|
|
);
|
|
}, 400)
|
|
};
|
|
setCam();
|
|
} else {
|
|
|
|
const setCam = async () => {
|
|
controls?.setLookAt(
|
|
...selectedZone.zoneViewPortPosition,
|
|
selectedZone.zoneViewPortTarget[0],
|
|
selectedZone.zoneViewPortTarget[1],
|
|
selectedZone.zoneViewPortTarget[2],
|
|
true
|
|
);
|
|
};
|
|
setCam();
|
|
}
|
|
}
|
|
}
|
|
}, [selectedZone.zoneViewPortTarget]);
|
|
|
|
useFrame(() => {
|
|
if (Edit) {
|
|
setZonePosition([controls.getPosition().x, controls.getPosition().y, controls.getPosition().z])
|
|
setZoneTarget([controls.getTarget().x, controls.getTarget().y, controls.getTarget().z])
|
|
}
|
|
})
|
|
return (
|
|
<> </>
|
|
);
|
|
}
|