bug fix
This commit is contained in:
93
app/src/modules/visualization/functions/zoneCameraTarget.tsx
Normal file
93
app/src/modules/visualization/functions/zoneCameraTarget.tsx
Normal file
@@ -0,0 +1,93 @@
|
||||
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 (
|
||||
<> </>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user