added Navmesh Details

app/package.json

@@ -9,10 +9,12 @@
     "@react-three/drei": "^9.113.0",
     "@react-three/fiber": "^8.17.7",
     "@react-three/postprocessing": "^2.16.3",
+    "@recast-navigation/three": "^0.39.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
-    "@turf/turf": "^7.1.0",
+    "@turf/helpers": "^7.2.0",
+    "@turf/turf": "^7.2.0",
     "@types/jest": "^27.5.2",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",

app/src/modules/builder/agv/navMeshDetails.tsx

@@ -0,0 +1,166 @@
+// import React, { useEffect, useState } from "react";
+// import { init as initRecastNavigation } from "@recast-navigation/core";
+// import { generateSoloNavMesh } from "@recast-navigation/generators";
+// import { DebugDrawer, getPositionsAndIndices } from "@recast-navigation/three";
+// import { useThree } from "@react-three/fiber";
+// import * as THREE from "three";
+// interface RawNavMesh {
+//   ptr: number; // Replace `number` with the actual type if known
+// }
+
+// interface NavMesh {
+//   raw: RawNavMesh;
+// }
+
+// // Update the MeshState interface to use the correct type
+// interface MeshState {
+//   setNavMesh: React.Dispatch<React.SetStateAction<NavMesh | null>>;
+// }
+// export default function NavMeshDetails({ setNavMesh }: MeshState) {
+//   const { scene } = useThree();
+//   useEffect(() => {
+//     const initializeNavMesh = async () => {
+//       try {
+//         // Initialize Recast Navigation
+//         await initRecastNavigation();
+
+//         // Extract meshes from the scene
+//         // Extract meshes from the scene
+//         const meshes = scene?.children
+//           .filter((child) => child.name === "Meshes")
+//           .flatMap((mesh) => mesh.children);
+
+//         if (!meshes || meshes.length === 0) {
+
+//           return;
+//         }
+
+//         // Filter and process only Mesh objects
+//         const meshObjects = meshes.filter(
+//           (
+//             child
+//           ): child is THREE.Mesh<
+//             THREE.BufferGeometry,
+//             THREE.Material | THREE.Material[]
+//           > => child instanceof THREE.Mesh
+//         );
+
+//         if (meshObjects.length === 0) {
+
+//           return;
+//         }
+
+//         // Get positions and indices from the meshes
+//         const [positions, indices] = getPositionsAndIndices(meshObjects);
+
+//         // Generate navigation mesh
+//         const cs = 0.05;
+//         const ch = 0.05;
+//         const walkableRadius = 0.87;
+//         const { success, navMesh } = generateSoloNavMesh(positions, indices, {
+//           cs,
+//           ch,
+//           walkableRadius: Math.round(walkableRadius / ch),
+//         });
+
+//         if (!success || !navMesh) {
+
+//           return;
+//         }
+
+//         // Log and update the navigation mesh
+
+//
+//         setNavMesh(navMesh);
+
+//         // Draw the debug visualization
+//         const debugDrawer = new DebugDrawer();
+//         debugDrawer.drawNavMesh(navMesh);
+//         // scene.add(debugDrawer); // Uncomment if you want to add the debug drawer to the scene
+//       } catch (error) {
+
+//       }
+//     };
+
+//     initializeNavMesh();
+//   }, [setNavMesh, scene]);
+
+//   return null;
+// }
+import React, { useEffect } from "react";
+import { init as initRecastNavigation } from "@recast-navigation/core";
+import { generateSoloNavMesh } from "@recast-navigation/generators";
+import { DebugDrawer, getPositionsAndIndices } from "@recast-navigation/three";
+import { useThree } from "@react-three/fiber";
+import * as THREE from "three";
+
+// Import the NavMesh type from the library
+import { NavMesh as RecastNavMesh } from "@recast-navigation/core";
+
+// Define the state type based on the library's NavMesh type
+interface MeshState {
+  setNavMesh: React.Dispatch<React.SetStateAction<RecastNavMesh | null>>;
+}
+
+export default function NavMeshDetails({ setNavMesh }: MeshState) {
+  const { scene } = useThree();
+
+  useEffect(() => {
+    const initializeNavMesh = async () => {
+      try {
+        // Initialize Recast Navigation
+        await initRecastNavigation();
+
+        // Extract meshes from the scene
+        const meshes = scene?.children
+          .filter((child) => child.name === "Meshes")
+          .flatMap((mesh) => mesh.children);
+
+        if (!meshes || meshes.length === 0) {
+          return;
+        }
+
+        // Filter and process only Mesh objects
+        const meshObjects = meshes.filter(
+          (
+            child
+          ): child is THREE.Mesh<
+            THREE.BufferGeometry,
+            THREE.Material | THREE.Material[]
+          > => child instanceof THREE.Mesh
+        );
+
+        if (meshObjects.length === 0) {
+          return;
+        }
+
+        // Get positions and indices from the meshes
+        const [positions, indices] = getPositionsAndIndices(meshObjects);
+
+        // Generate navigation mesh
+        const cs = 0.05;
+        const ch = 0.05;
+        const walkableRadius = 0.95;
+        const { success, navMesh } = generateSoloNavMesh(positions, indices, {
+          cs,
+          ch,
+          walkableRadius: Math.round(walkableRadius / ch),
+        });
+
+        if (!success || !navMesh) {
+          return;
+        }
+        // Log and update the navigation mesh
+        setNavMesh(navMesh); // Now compatible with the library's NavMesh type
+        // Draw the debug visualization
+        const debugDrawer = new DebugDrawer();
+        debugDrawer.drawNavMesh(navMesh);
+        scene.add(debugDrawer); // Uncomment if you want to add the debug drawer to the scene
+      } catch (error) {}
+    };
+
+    initializeNavMesh();
+  }, [setNavMesh, scene]);
+
+  return null;
+}

app/src/modules/builder/agv/pathNavigator.tsx

@@ -0,0 +1,140 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import * as THREE from "three";
+import { NavMeshQuery } from "@recast-navigation/core";
+import { NavMesh as RecastNavMesh } from "@recast-navigation/core";
+import { useFrame, useThree } from "@react-three/fiber";
+import { Line } from "@react-three/drei";
+interface Pair {
+  x: number;
+  y: number;
+  z: number;
+}
+interface PathProps {
+  navMesh: RecastNavMesh | null; // The navigation mesh
+  pathPoints: Pair[] | undefined; // Array of points (or undefined)
+}
+const PathNavigator = ({ navMesh, pathPoints }: PathProps) => {
+  const { scene, raycaster, gl } = useThree();
+
+  const [path, setPath] = useState<THREE.Vector3[]>([]); // Path is an array of THREE.Vector3
+  const [points, setSelectedPoints] = useState<THREE.Vector3[]>([]); // Path is an array of THREE.Vector3
+  const progressRef = useRef<number>(0);
+  const meshRef = useRef<THREE.Mesh>(null!);
+  const handleClick = useCallback(() => {
+    if (!navMesh) return;
+
+    const intersects = raycaster.intersectObjects(scene.children, true);
+    if (intersects.length > 0) {
+      const { point } = intersects[0];
+      const newPoint = { x: point.x, y: 0, z: point.z };
+
+      setSelectedPoints((prevPoints: THREE.Vector3[]) => {
+        if (prevPoints.length === 2) {
+          // If two points already exist, replace them with the new point
+          return [new THREE.Vector3(newPoint.x, newPoint.y, newPoint.z)];
+        }
+        // Otherwise, append the new point to the array
+        return [
+          ...prevPoints,
+          new THREE.Vector3(newPoint.x, newPoint.y, newPoint.z),
+        ];
+      });
+    }
+  }, [navMesh, scene]);
+  React.useEffect(() => {
+    if (points?.length === 2 && navMesh) {
+      const [start, end] = points;
+      console.log("start: ", start);
+      console.log("end: ", end);
+
+      const navMeshQuery = new NavMeshQuery(navMesh);
+      console.log("navMeshQuery: ", navMeshQuery);
+
+      const { path } = navMeshQuery.computePath(start, end);
+      console.log("paths: ", path);
+
+      //   if (path.length > 0) {
+      //     setPath(
+      //       path.map((point) => {
+      //         const newY = point.y + 0.1; // Increment the y-coordinate
+      //         return new THREE.Vector3(point.x, newY, point.z); // Create a new Vector3
+      //       })
+      //     );
+      //     progressRef.current = 0;
+      //   }
+    }
+  }, [points,]);
+
+  useFrame((_, delta) => {
+    if (path.length > 1 && meshRef.current) {
+      const speed = 3;
+      progressRef.current += delta * speed;
+      let totalDistance = 0;
+      const distances = [];
+      for (let i = 0; i < path.length - 1; i++) {
+        const start = new THREE.Vector3(...path[i]);
+        const end = new THREE.Vector3(...path[i + 1]);
+        const segmentDistance = start.distanceTo(end);
+        distances.push(segmentDistance);
+        totalDistance += segmentDistance;
+      }
+
+      let coveredDistance = progressRef.current;
+      let accumulatedDistance = 0;
+      let index = 0;
+
+      while (
+        index < distances.length &&
+        coveredDistance > accumulatedDistance + distances[index]
+      ) {
+        accumulatedDistance += distances[index];
+        index++;
+      }
+
+      if (index < distances.length) {
+        const start = new THREE.Vector3(...path[index]);
+        const end = new THREE.Vector3(...path[index + 1]);
+        const segmentDistance = distances[index];
+
+        const t = (coveredDistance - accumulatedDistance) / segmentDistance;
+        const position = start.lerp(end, t);
+        meshRef.current.position.copy(position);
+
+        const direction = new THREE.Vector3()
+          .subVectors(end, start)
+          .normalize();
+        const targetQuaternion = new THREE.Quaternion().setFromUnitVectors(
+          new THREE.Vector3(0, 0, 1),
+          direction
+        );
+        meshRef.current.quaternion.slerp(targetQuaternion, 0.1);
+      } else {
+        progressRef.current = totalDistance;
+      }
+    }
+  });
+
+  useEffect(() => {
+    gl.domElement.addEventListener("click", handleClick);
+    return () => gl.domElement.removeEventListener("click", handleClick);
+  }, [handleClick]);
+  return (
+    <>
+      {path.length > 0 && <Line points={path} color="blue" lineWidth={3} />}
+      {path.length > 0 && (
+        // <primitive
+        //   ref={gltfRef}
+        //   object={gltfClone}
+        //   position={path.length > 0 ? path[0] : [0, 0.1, 0]}
+        //   scale={[0.5, 0.5, 0.5]}
+        // />
+        <mesh ref={meshRef} position={path.length > 0 ? path[0] : [0, 0.1, 0]}>
+          <boxGeometry args={[1, 1, 1]} />
+          <meshNormalMaterial />
+        </mesh>
+      )}
+    </>
+  );
+};
+
+export default PathNavigator;

app/src/modules/builder/agv/polygonGenerator.tsx

@@ -0,0 +1,159 @@
+import * as THREE from "three";
+import { useEffect, useRef } from "react";
+import { useThree } from "@react-three/fiber";
+import * as turf from "@turf/turf";
+import * as Types from "../../../types/world/worldTypes";
+// import { Feature, Polygon, MultiPolygon } from "@turf/helpers";
+type Point = {
+  position: { x: number; y: number; z: number };
+  uuid: string;
+};
+
+type LineData = {
+  type: string;
+  line: Point[];
+};
+
+type PolygonGeneratorProps = {
+  processPoint: LineData[];
+  groupRef: React.RefObject<THREE.Group>;
+};
+
+export default function PolygonGenerator({
+  processPoint,
+  groupRef,
+}: PolygonGeneratorProps) {
+  const { scene } = useThree();
+  let lines : Types.Lines;
+//   console.log("storedFloorItems: ", lines);
+
+//   useEffect(() => {
+//     if (!groupRef?.current) return;
+//     const groundGeometry = new THREE.BoxGeometry(80, 1, 60);
+//     const groundMaterial = new THREE.MeshBasicMaterial({ color: "#99ff99" });
+//     const groundMesh = new THREE.Mesh(groundGeometry, groundMaterial);
+//     groundMesh.position.set(-10, -0.5, 3);
+//     groundMesh.name = "GroundMesh";
+//     groupRef.current.add(groundMesh);
+//     scene.add(groupRef.current);
+//   }, [groupRef, scene]);
+
+  useEffect(() => {
+    if (!processPoint) return;
+    const wallInLayer = processPoint?.filter(
+      (line) => line.type === "WallLine"
+    );
+    const wallPoints = wallInLayer.map((pair) =>
+      pair?.line.map((vals) => vals.position)
+    );
+    renderWallGeometry(wallPoints);
+
+    const linesInLayer = processPoint?.filter(
+      (line) => line.type === "AisleLine"
+    );
+    const result = linesInLayer.map((pair) =>
+      pair?.line.map((point) => ({
+        position: [point.position.x, point.position.z],
+        uuid: point.uuid,
+      }))
+    );
+
+    const lineFeatures = result.map((line) =>
+      turf.lineString(line.map((p) => p.position))
+    );
+    const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
+    let union: any[] = [];
+
+    polygons.features.forEach((feature) => {
+      union.push(feature);
+    });
+
+    if (union.length > 0) {
+      const unionResult = turf.union(turf.featureCollection(union));
+      if (unionResult && unionResult.geometry.type === "MultiPolygon") {
+        unionResult.geometry.coordinates.forEach((poly) => {
+          const Coordinates = poly[0].map(
+            ([x, z]) => new THREE.Vector3(x, 0, z)
+          );
+          renderBoxGeometry(Coordinates);
+        });
+      } else if (unionResult && unionResult.geometry.type === "Polygon") {
+        const Coordinates = unionResult.geometry.coordinates[0].map(
+          ([x, z]) => new THREE.Vector3(x, 0, z)
+        );
+        renderBoxGeometry(Coordinates);
+      }
+    }
+  }, [processPoint]);
+
+  const renderBoxGeometry = (coordinates: THREE.Vector3[]) => {
+    const minX = Math.min(...coordinates.map((p) => p.x));
+    const maxX = Math.max(...coordinates.map((p) => p.x));
+    const minZ = Math.min(...coordinates.map((p) => p.z));
+    const maxZ = Math.max(...coordinates.map((p) => p.z));
+
+    const width = maxX - minX;
+    const depth = maxZ - minZ;
+    const height = 3;
+
+    const geometry = new THREE.BoxGeometry(width, height, depth);
+    const material = new THREE.MeshBasicMaterial({ color: "#ff66cc" });
+    const mesh = new THREE.Mesh(geometry, material);
+    mesh.position.set((minX + maxX) / 2, height / 2, (minZ + maxZ) / 2);
+
+    groupRef?.current?.add(mesh);
+    scene.add(groupRef.current!);
+  };
+
+  const renderWallGeometry = (
+    walls: { x: number; y: number; z: number }[][]
+  ) => {
+    walls.forEach((wall) => {
+      if (wall.length < 2) return;
+
+      for (let i = 0; i < wall.length - 1; i++) {
+        const start = new THREE.Vector3(wall[i].x, wall[i].y, wall[i].z);
+        const end = new THREE.Vector3(
+          wall[i + 1].x,
+          wall[i + 1].y,
+          wall[i + 1].z
+        );
+        const wallHeight = 10;
+        const direction = new THREE.Vector3().subVectors(end, start);
+        const length = direction.length();
+        direction.normalize();
+
+        const wallGeometry = new THREE.BoxGeometry(length, wallHeight, 0.5);
+        const wallMaterial = new THREE.MeshBasicMaterial({
+          color: "#aaa",
+          transparent: true,
+          opacity: 0.5,
+        });
+        const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
+
+        const midPoint = new THREE.Vector3()
+          .addVectors(start, end)
+          .multiplyScalar(0.5);
+        wallMesh.position.set(midPoint.x, wallHeight / 2, midPoint.z);
+
+        const quaternion = new THREE.Quaternion();
+        quaternion.setFromUnitVectors(new THREE.Vector3(1, 0, 0), direction);
+        wallMesh.quaternion.copy(quaternion);
+
+        groupRef?.current?.add(wallMesh);
+        scene.add(groupRef.current!);
+
+        const lineGeometry = new THREE.BufferGeometry().setFromPoints([
+          start,
+          end,
+        ]);
+        const lineMaterial = new THREE.LineBasicMaterial({ color: "blue" });
+        const line = new THREE.Line(lineGeometry, lineMaterial);
+
+        groupRef?.current?.add(line);
+      }
+    });
+  };
+
+  return null;
+}

app/src/modules/scene/scene.tsx

@@ -51,6 +51,9 @@ export default function Scene() {
         <MqttEvents />
         <Environment files={background} environmentIntensity={1.5} />
       </Canvas>
+
+
+      
     </KeyboardControls>
   );
 }

app/src/modules/scene/world/world.tsx

@@ -28,7 +28,7 @@ import {
   useShadows,
   useUpdateScene,
   useWalls,
-  useToolMode
+  useToolMode,
 } from "../../../store/store";
 
 //////////  3D Function Imports  //////////
@@ -50,16 +50,17 @@ import { findEnvironment } from "../../../services/factoryBuilder/environment/fi
 import Layer2DVisibility from "../../builder/geomentries/layers/layer2DVisibility";
 import DrieHtmlTemp from "../mqttTemp/drieHtmlTemp";
 import ZoneGroup from "../../builder/groups/zoneGroup";
+import Agv from "../../builder/agv/agv";
 
 export default function World() {
-  const state = useThree<Types.ThreeState>();                           // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
+  const state = useThree<Types.ThreeState>(); // Importing the state from the useThree hook, which contains the scene, camera, and other Three.js elements.
-  const csg = useRef();                                                 // Reference for CSG object, used for 3D modeling.
+  const csg = useRef(); // Reference for CSG object, used for 3D modeling.
-  const CSGGroup = useRef() as Types.RefMesh;                           // Reference to a group of CSG objects.
+  const CSGGroup = useRef() as Types.RefMesh; // Reference to a group of CSG objects.
-  const scene = useRef() as Types.RefScene;                             // Reference to the scene.
+  const scene = useRef() as Types.RefScene; // Reference to the scene.
-  const camera = useRef() as Types.RefCamera;                           // Reference to the camera object.
+  const camera = useRef() as Types.RefCamera; // Reference to the camera object.
-  const controls = useRef<any>();                                       // Reference to the controls object.
+  const controls = useRef<any>(); // Reference to the controls object.
-  const raycaster = useRef() as Types.RefRaycaster;                     // Reference for raycaster used for detecting objects being pointed at in the scene.
+  const raycaster = useRef() as Types.RefRaycaster; // Reference for raycaster used for detecting objects being pointed at in the scene.
-  const dragPointControls = useRef() as Types.RefDragControl;          // Reference for drag point controls, an array for drag control.
+  const dragPointControls = useRef() as Types.RefDragControl; // Reference for drag point controls, an array for drag control.
 
   // Assigning the scene and camera from the Three.js state to the references.
 
@@ -68,47 +69,48 @@ export default function World() {
   controls.current = state.controls;
   raycaster.current = state.raycaster;
 
-  const plane = useRef<THREE.Mesh>(null);                               // Reference for a plane object for raycaster reference.
+  const plane = useRef<THREE.Mesh>(null); // Reference for a plane object for raycaster reference.
-  const grid = useRef() as any;                                         // Reference for a grid object for raycaster reference.
+  const grid = useRef() as any; // Reference for a grid object for raycaster reference.
-  const snappedPoint = useRef() as Types.RefVector3;                    // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
+  const snappedPoint = useRef() as Types.RefVector3; // Reference for storing a snapped point at the (end = isSnapped) and (start = ispreSnapped) of the line.
-  const isSnapped = useRef(false) as Types.RefBoolean;                  // Boolean reference to indicate if an object is snapped at the (end).
+  const isSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (end).
-  const anglesnappedPoint = useRef() as Types.RefVector3;               // Reference for storing an angle-snapped point when the line is in 90 degree etc...
+  const anglesnappedPoint = useRef() as Types.RefVector3; // Reference for storing an angle-snapped point when the line is in 90 degree etc...
-  const isAngleSnapped = useRef(false) as Types.RefBoolean;             // Boolean to indicate if angle snapping is active.
+  const isAngleSnapped = useRef(false) as Types.RefBoolean; // Boolean to indicate if angle snapping is active.
-  const isSnappedUUID = useRef() as Types.RefString;                    // UUID reference to identify the snapped point.
+  const isSnappedUUID = useRef() as Types.RefString; // UUID reference to identify the snapped point.
-  const ispreSnapped = useRef(false) as Types.RefBoolean;               // Boolean reference to indicate if an object is snapped at the (start).
+  const ispreSnapped = useRef(false) as Types.RefBoolean; // Boolean reference to indicate if an object is snapped at the (start).
-  const tempLoader = useRef() as Types.RefMesh;                         // Reference for a temporary loader for the floor items.
+  const tempLoader = useRef() as Types.RefMesh; // Reference for a temporary loader for the floor items.
-  const isTempLoader = useRef() as Types.RefBoolean;                    // Reference to check if a temporary loader is active.
+  const isTempLoader = useRef() as Types.RefBoolean; // Reference to check if a temporary loader is active.
-  const Tube = useRef() as Types.RefTubeGeometry;                       // Reference for tubes used for reference line creation and updation.
+  const Tube = useRef() as Types.RefTubeGeometry; // Reference for tubes used for reference line creation and updation.
-  const line = useRef([]) as Types.RefLine;                             // Reference for line which stores the current line that is being drawn.
+  const line = useRef([]) as Types.RefLine; // Reference for line which stores the current line that is being drawn.
-  const lines = useRef([]) as Types.RefLines;                           // Reference for lines which stores all the lines that are ever drawn.
+  const lines = useRef([]) as Types.RefLines; // Reference for lines which stores all the lines that are ever drawn.
-  const onlyFloorline = useRef<Types.OnlyFloorLine>([]);                // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
+  const onlyFloorline = useRef<Types.OnlyFloorLine>([]); // Reference for floor lines which does not have walls or roof and have only floor used to store the current line that is being drawn.
-  const onlyFloorlines = useRef<Types.OnlyFloorLines>([]);              // Reference for all the floor lines that are ever drawn.
+  const onlyFloorlines = useRef<Types.OnlyFloorLines>([]); // Reference for all the floor lines that are ever drawn.
-  const ReferenceLineMesh = useRef() as Types.RefMesh;                  // Reference for storing the mesh of the reference line for moving it during draw.
+  const ReferenceLineMesh = useRef() as Types.RefMesh; // Reference for storing the mesh of the reference line for moving it during draw.
-  const LineCreated = useRef(false) as Types.RefBoolean;                // Boolean to track whether the reference line is created or not.
+  const LineCreated = useRef(false) as Types.RefBoolean; // Boolean to track whether the reference line is created or not.
-  const referencePole = useRef() as Types.RefMesh;                      // Reference for a pole that is used as the reference for the user to show where it is placed.
+  const referencePole = useRef() as Types.RefMesh; // Reference for a pole that is used as the reference for the user to show where it is placed.
-  const itemsGroup = useRef() as Types.RefGroup;                        // Reference to the THREE.Group that has the floor items (Gltf).
+  const itemsGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the floor items (Gltf).
-  const floorGroup = useRef() as Types.RefGroup;                        // Reference to the THREE.Group that has the roofs and the floors.
+  const floorGroup = useRef() as Types.RefGroup; // Reference to the THREE.Group that has the roofs and the floors.
-  const AttachedObject = useRef() as Types.RefMesh;                     // Reference for an object that is attached using dbl click for transform controls rotation.
+  const AttachedObject = useRef() as Types.RefMesh; // Reference for an object that is attached using dbl click for transform controls rotation.
-  const floorPlanGroup = useRef() as Types.RefGroup;                    // Reference for a THREE.Group that has the lines group and the points group.
+  const floorPlanGroup = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines group and the points group.
-  const floorPlanGroupLine = useRef() as Types.RefGroup;                // Reference for a THREE.Group that has the lines that are drawn.
+  const floorPlanGroupLine = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the lines that are drawn.
-  const floorPlanGroupPoint = useRef() as Types.RefGroup;              // Reference for a THREE.Group that has the points that are created.
+  const floorPlanGroupPoint = useRef() as Types.RefGroup; // Reference for a THREE.Group that has the points that are created.
   const floorGroupAisle = useRef() as Types.RefGroup;
   const zoneGroup = useRef() as Types.RefGroup;
-  const currentLayerPoint = useRef([]) as Types.RefMeshArray;          // Reference for points that re in the current layer used to update the points in drag controls.
+  const currentLayerPoint = useRef([]) as Types.RefMeshArray; // Reference for points that re in the current layer used to update the points in drag controls.
-  const hoveredDeletablePoint = useRef() as Types.RefMesh;              // Reference for the currently hovered point that can be deleted.
+  const hoveredDeletablePoint = useRef() as Types.RefMesh; // Reference for the currently hovered point that can be deleted.
-  const hoveredDeletableLine = useRef() as Types.RefMesh;               // Reference for the currently hovered line that can be deleted.
+  const hoveredDeletableLine = useRef() as Types.RefMesh; // Reference for the currently hovered line that can be deleted.
-  const hoveredDeletableFloorItem = useRef() as Types.RefMesh;          // Reference for the currently hovered floor item that can be deleted.
+  const hoveredDeletableFloorItem = useRef() as Types.RefMesh; // Reference for the currently hovered floor item that can be deleted.
-  const hoveredDeletableWallItem = useRef() as Types.RefMesh;           // Reference for the currently hovered wall item that can be deleted.
+  const hoveredDeletableWallItem = useRef() as Types.RefMesh; // Reference for the currently hovered wall item that can be deleted.
-  const hoveredDeletablePillar = useRef() as Types.RefMesh;             // Reference for the currently hovered pillar that can be deleted.
+  const hoveredDeletablePillar = useRef() as Types.RefMesh; // Reference for the currently hovered pillar that can be deleted.
-  const currentWallItem = useRef() as Types.RefMesh;                    // Reference for the currently selected wall item that can be scaled, dragged etc...
+  const currentWallItem = useRef() as Types.RefMesh; // Reference for the currently selected wall item that can be scaled, dragged etc...
 
-  const cursorPosition = new THREE.Vector3();                           // 3D vector for storing the cursor position.
+  const cursorPosition = new THREE.Vector3(); // 3D vector for storing the cursor position.
 
-  const [selectedItemsIndex, setSelectedItemsIndex] = useState<Types.Number | null>(null);      // State for tracking the index of the selected item.
+  const [selectedItemsIndex, setSelectedItemsIndex] =
-  const { activeLayer, setActiveLayer } = useActiveLayer();                                     // State that changes based on which layer the user chooses in Layers.jsx.
+    useState<Types.Number | null>(null); // State for tracking the index of the selected item.
-  const { toggleView, setToggleView } = useToggleView();                                        // State for toggling between 2D and 3D.
+  const { activeLayer, setActiveLayer } = useActiveLayer(); // State that changes based on which layer the user chooses in Layers.jsx.
+  const { toggleView, setToggleView } = useToggleView(); // State for toggling between 2D and 3D.
   const { toolMode, setToolMode } = useToolMode();
-  const { movePoint, setMovePoint } = useMovePoint();                                              // State that stores a boolean which represents whether the move mode is active or not.
+  const { movePoint, setMovePoint } = useMovePoint(); // State that stores a boolean which represents whether the move mode is active or not.
   const { deletePointOrLine, setDeletePointOrLine } = useDeletePointOrLine();
   const { socket } = useSocketStore();
   const { roofVisibility, setRoofVisibility } = useRoofVisibility();
@@ -118,7 +120,6 @@ export default function World() {
   const { walls, setWalls } = useWalls();
   const [RefTextupdate, setRefTextUpdate] = useState(-1000);
 
-
   // const loader = new GLTFLoader();
   // const dracoLoader = new DRACOLoader();
 
@@ -162,7 +163,14 @@ export default function World() {
       dragPointControls.current.enabled = false;
     }
     if (toggleView) {
-      Layer2DVisibility(activeLayer, floorPlanGroup, floorPlanGroupLine, floorPlanGroupPoint, currentLayerPoint, dragPointControls);
+      Layer2DVisibility(
+        activeLayer,
+        floorPlanGroup,
+        floorPlanGroupLine,
+        floorPlanGroupPoint,
+        currentLayerPoint,
+        dragPointControls
+      );
     } else {
       setToolMode(null);
       setDeletePointOrLine(false);
@@ -179,11 +187,14 @@ export default function World() {
   }, []);
 
   useEffect(() => {
-    const email = localStorage.getItem('email')
+    const email = localStorage.getItem("email");
-    const organization = (email!.split("@")[1]).split(".")[0];
+    const organization = email!.split("@")[1].split(".")[0];
 
     async function fetchVisibility() {
-      const visibility = await findEnvironment(organization, localStorage.getItem('userId')!);
+      const visibility = await findEnvironment(
+        organization,
+        localStorage.getItem("userId")!
+      );
       if (visibility) {
         setRoofVisibility(visibility.roofVisibility);
         setWallVisibility(visibility.wallVisibility);
@@ -191,13 +202,33 @@ export default function World() {
       }
     }
     fetchVisibility();
-  }, [])
+  }, []);
 
   //////////  UseFrame is Here  //////////
 
   useFrame(() => {
     if (toolMode) {
-      Draw(state, plane, cursorPosition, floorPlanGroupPoint, floorPlanGroupLine, snappedPoint, isSnapped, isSnappedUUID, line, lines, ispreSnapped, floorPlanGroup, ReferenceLineMesh, LineCreated, setRefTextUpdate, Tube, anglesnappedPoint, isAngleSnapped, toolMode)
+      Draw(
+        state,
+        plane,
+        cursorPosition,
+        floorPlanGroupPoint,
+        floorPlanGroupLine,
+        snappedPoint,
+        isSnapped,
+        isSnappedUUID,
+        line,
+        lines,
+        ispreSnapped,
+        floorPlanGroup,
+        ReferenceLineMesh,
+        LineCreated,
+        setRefTextUpdate,
+        Tube,
+        anglesnappedPoint,
+        isAngleSnapped,
+        toolMode
+      );
     }
   });
 
@@ -304,7 +335,6 @@ export default function World() {
         anglesnappedPoint={anglesnappedPoint}
       /> */}
 
-
       <ZoneGroup />
 
       <FloorGroupAilse
@@ -327,10 +357,10 @@ export default function World() {
         anglesnappedPoint={anglesnappedPoint}
       />
 
-      <DrieHtmlTemp
+      <DrieHtmlTemp itemsGroup={itemsGroup} />
-        itemsGroup={itemsGroup}
-      />
 
+      <Agv />
+      {/* <Agv lines={lines} plane={plane} /> */}
     </>
   );
-}
+}