zone camera updation and builder zoneadatas

2025-03-26 18:30:33 +05:30
parent 5cc3b83e43
commit 82aabc2004
18 changed files with 472 additions and 175 deletions
--- a/app/src/components/ui/componets/zoneCameraTarget.tsx
+++ b/app/src/components/ui/componets/zoneCameraTarget.tsx
@@ -0,0 +1,96 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+import { useSelectedZoneStore } from "../../../store/useZoneStore";
+
+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();
+
+
+    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(
+                                ...camPosition.toArray(),
+                                selectedZone.zoneViewPortTarget[0],
+                                selectedZone.zoneViewPortTarget[1],
+                                selectedZone.zoneViewPortTarget[2],
+                                true
+                            );
+                        }, 400)
+                    };
+                    setCam();
+                } else {
+                    
+                    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(
+                            ...camPosition.toArray(),
+                            selectedZone.zoneViewPortTarget[0],
+                            selectedZone.zoneViewPortTarget[1],
+                            selectedZone.zoneViewPortTarget[2],
+                            true
+                        );
+                    };
+                    setCam();
+                }
+            }
+        }
+    }, [selectedZone.zoneViewPortTarget, camera, controls]);
+    return (
+        <> </>
+    );
+}