created paths based on aisle and wall points
This commit is contained in:
parent
6e925a995c
commit
c1251dc598
|
|
@ -39,7 +39,7 @@ const DropDownList: React.FC<DropDownListProps> = ({
|
|||
useEffect(() => {
|
||||
async function GetZoneData() {
|
||||
const response = await getZonesApi("hexrfactory")
|
||||
console.log('response: ', response.data);
|
||||
// console.log('response: ', response.data);
|
||||
setZoneDataList([{ id: "1", name: "zone1" },
|
||||
{ id: "2", name: "Zone 2" },])
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,146 +1,43 @@
|
|||
// 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 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";
|
||||
import * as Types from "../../../types/world/worldTypes";
|
||||
|
||||
// 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>>;
|
||||
interface NavMeshDetailsProps {
|
||||
setNavMesh: (navMesh: any) => void;
|
||||
groupRef: React.MutableRefObject<THREE.Group | null>;
|
||||
lines: Types.RefLines;
|
||||
plane: Types.RefMesh;
|
||||
}
|
||||
|
||||
export default function NavMeshDetails({ setNavMesh }: MeshState) {
|
||||
export default function NavMeshDetails({
|
||||
lines,
|
||||
setNavMesh,
|
||||
groupRef,
|
||||
plane,
|
||||
}: NavMeshDetailsProps) {
|
||||
const { scene } = useThree();
|
||||
|
||||
useEffect(() => {
|
||||
const initializeNavMesh = async () => {
|
||||
const initializeNavigation = 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) {
|
||||
if (!groupRef.current || groupRef.current.children.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
|
||||
);
|
||||
const meshes = groupRef?.current?.children as THREE.Mesh[];
|
||||
|
||||
if (meshObjects.length === 0) {
|
||||
return;
|
||||
}
|
||||
const [positions, indices] = getPositionsAndIndices(meshes);
|
||||
|
||||
// Get positions and indices from the meshes
|
||||
const [positions, indices] = getPositionsAndIndices(meshObjects);
|
||||
const cs = 0.5;
|
||||
const ch = 0.5;
|
||||
const walkableRadius = 0.89;
|
||||
|
||||
// Generate navigation mesh
|
||||
const cs = 0.05;
|
||||
const ch = 0.05;
|
||||
const walkableRadius = 0.95;
|
||||
const { success, navMesh } = generateSoloNavMesh(positions, indices, {
|
||||
cs,
|
||||
ch,
|
||||
|
|
@ -150,17 +47,17 @@ export default function NavMeshDetails({ setNavMesh }: MeshState) {
|
|||
if (!success || !navMesh) {
|
||||
return;
|
||||
}
|
||||
// Log and update the navigation mesh
|
||||
setNavMesh(navMesh); // Now compatible with the library's NavMesh type
|
||||
// Draw the debug visualization
|
||||
|
||||
setNavMesh(navMesh);
|
||||
|
||||
const debugDrawer = new DebugDrawer();
|
||||
debugDrawer.drawNavMesh(navMesh);
|
||||
// scene.add(debugDrawer); // Uncomment if you want to add the debug drawer to the scene
|
||||
// scene.add(debugDrawer);
|
||||
} catch (error) {}
|
||||
};
|
||||
|
||||
initializeNavMesh();
|
||||
}, [setNavMesh, scene]);
|
||||
initializeNavigation();
|
||||
}, [scene, groupRef, lines.current]);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,76 +1,46 @@
|
|||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import React, { useEffect, useState, useRef } from "react";
|
||||
import * as THREE from "three";
|
||||
import { useFrame } from "@react-three/fiber";
|
||||
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;
|
||||
|
||||
// Define interface for props
|
||||
interface PathNavigatorProps {
|
||||
navMesh: any;
|
||||
selectedPoints: any;
|
||||
}
|
||||
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;
|
||||
export default function PathNavigator({
|
||||
navMesh,
|
||||
selectedPoints,
|
||||
}: PathNavigatorProps) {
|
||||
const [path, setPath] = useState<[number, number, number][]>([]);
|
||||
const progressRef = useRef(0);
|
||||
const meshRef = useRef<THREE.Mesh | null>(null);
|
||||
|
||||
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);
|
||||
useEffect(() => {
|
||||
if (selectedPoints.length === 2 && navMesh) {
|
||||
const [start, end] = selectedPoints;
|
||||
if (!start || !end) return;
|
||||
|
||||
const navMeshQuery = new NavMeshQuery(navMesh);
|
||||
console.log("navMeshQuery: ", navMeshQuery);
|
||||
|
||||
const { path } = navMeshQuery.computePath(start, end);
|
||||
console.log("paths: ", path);
|
||||
const { path: computedPath } = navMeshQuery.computePath(start, end);
|
||||
|
||||
// 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;
|
||||
// }
|
||||
if (computedPath.length > 0) {
|
||||
setPath(computedPath.map(({ x, y, z }) => [x, y + 0.1, z]));
|
||||
progressRef.current = 0;
|
||||
}
|
||||
}
|
||||
}, [points,]);
|
||||
}, [selectedPoints, navMesh]);
|
||||
|
||||
useFrame((_, delta) => {
|
||||
if (path.length > 1 && meshRef.current) {
|
||||
const speed = 3;
|
||||
progressRef.current += delta * speed;
|
||||
|
||||
let totalDistance = 0;
|
||||
const distances = [];
|
||||
const distances: number[] = [];
|
||||
for (let i = 0; i < path.length - 1; i++) {
|
||||
const start = new THREE.Vector3(...path[i]);
|
||||
const end = new THREE.Vector3(...path[i + 1]);
|
||||
|
|
@ -97,7 +67,7 @@ const PathNavigator = ({ navMesh, pathPoints }: PathProps) => {
|
|||
const segmentDistance = distances[index];
|
||||
|
||||
const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
||||
const position = start.lerp(end, t);
|
||||
const position = start.clone().lerp(end, t); // Use clone() to avoid mutating the original vector
|
||||
meshRef.current.position.copy(position);
|
||||
|
||||
const direction = new THREE.Vector3()
|
||||
|
|
@ -114,20 +84,10 @@ const PathNavigator = ({ navMesh, pathPoints }: PathProps) => {
|
|||
}
|
||||
});
|
||||
|
||||
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 />
|
||||
|
|
@ -135,6 +95,4 @@ const PathNavigator = ({ navMesh, pathPoints }: PathProps) => {
|
|||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PathNavigator;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,86 +1,86 @@
|
|||
import * as THREE from "three";
|
||||
import { useEffect, useRef } from "react";
|
||||
import { useThree } from "@react-three/fiber";
|
||||
import { useEffect, useState } from "react";
|
||||
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[];
|
||||
_id: {};
|
||||
layer: number;
|
||||
__v: number;
|
||||
};
|
||||
|
||||
type PolygonGeneratorProps = {
|
||||
processPoint: LineData[];
|
||||
groupRef: React.RefObject<THREE.Group>;
|
||||
lines: any;
|
||||
plane: any;
|
||||
};
|
||||
import arrayLinesToObject from "../geomentries/lines/lineConvertions/arrayLinesToObject";
|
||||
interface PolygonGeneratorProps {
|
||||
groupRef: React.MutableRefObject<THREE.Group | null>;
|
||||
lines: Types.RefLines;
|
||||
plane: Types.RefMesh;
|
||||
}
|
||||
|
||||
export default function PolygonGenerator({
|
||||
processPoint,
|
||||
groupRef,
|
||||
lines,
|
||||
plane,
|
||||
}: PolygonGeneratorProps) {
|
||||
const { scene } = useThree();
|
||||
|
||||
|
||||
// const [rooms, setRooms] = useState<THREE.Vector3[][]>([]);
|
||||
|
||||
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);
|
||||
if (groupRef.current && plane.current) {
|
||||
groupRef.current.add(plane.current.clone());
|
||||
}
|
||||
}, [groupRef, plane]);
|
||||
|
||||
const linesInLayer = processPoint?.filter(
|
||||
(line) => line.type === "AisleLine"
|
||||
);
|
||||
const result = linesInLayer.map((pair) =>
|
||||
useEffect(() => {
|
||||
let allLines = arrayLinesToObject(lines.current);
|
||||
const wallLines = allLines?.filter((line) => line?.type === "WallLine");
|
||||
const aisleLines = allLines?.filter((line) => line?.type === "AisleLine");
|
||||
|
||||
const wallPoints = wallLines
|
||||
.map((pair) => pair?.line.map((vals) => vals.position))
|
||||
.filter((wall): wall is THREE.Vector3[] => !!wall);
|
||||
|
||||
const result = aisleLines.map((pair) =>
|
||||
pair?.line.map((point) => ({
|
||||
position: [point.position.x, point.position.z],
|
||||
uuid: point.uuid,
|
||||
}))
|
||||
);
|
||||
if (!result || result.some((line) => !line)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const lineFeatures = result.map((line) =>
|
||||
turf.lineString(line.map((p) => p.position))
|
||||
const lineFeatures = result?.map((line: any) =>
|
||||
turf.lineString(line.map((p: any) => p?.position))
|
||||
);
|
||||
|
||||
const polygons = turf.polygonize(turf.featureCollection(lineFeatures));
|
||||
let union: any[] = [];
|
||||
renderWallGeometry(wallPoints);
|
||||
|
||||
let union: any = [];
|
||||
|
||||
polygons.features.forEach((feature) => {
|
||||
union.push(feature);
|
||||
});
|
||||
|
||||
if (union.length > 0) {
|
||||
if (union.length > 1) {
|
||||
const unionResult = turf.union(turf.featureCollection(union));
|
||||
if (unionResult && unionResult.geometry.type === "MultiPolygon") {
|
||||
|
||||
if (unionResult?.geometry.type === "MultiPolygon") {
|
||||
unionResult.geometry.coordinates.forEach((poly) => {
|
||||
const Coordinates = poly[0].map(
|
||||
([x, z]) => new THREE.Vector3(x, 0, z)
|
||||
);
|
||||
renderBoxGeometry(Coordinates);
|
||||
const coordinates = poly[0].map(([x, z]) => {
|
||||
return 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)
|
||||
} else if (unionResult?.geometry.type === "Polygon") {
|
||||
const coordinates = unionResult.geometry.coordinates[0].map(
|
||||
([x, z]) => {
|
||||
return new THREE.Vector3(x, 0, z);
|
||||
}
|
||||
);
|
||||
renderBoxGeometry(Coordinates);
|
||||
renderBoxGeometry(coordinates);
|
||||
}
|
||||
} else if (union.length === 1) {
|
||||
const coordinates = union[0].geometry.coordinates[0].map(
|
||||
([x, z]: [number, number]) => {
|
||||
return new THREE.Vector3(x, 0, z);
|
||||
}
|
||||
);
|
||||
// setRooms((prevRooms) => [...prevRooms, coordinates]);
|
||||
}
|
||||
}, [processPoint]);
|
||||
}, [lines.current]);
|
||||
|
||||
const renderBoxGeometry = (coordinates: THREE.Vector3[]) => {
|
||||
const minX = Math.min(...coordinates.map((p) => p.x));
|
||||
|
|
@ -97,16 +97,13 @@ export default function PolygonGenerator({
|
|||
color: "#ff66cc",
|
||||
visible: false,
|
||||
});
|
||||
|
||||
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!);
|
||||
groupRef.current?.add(mesh);
|
||||
};
|
||||
|
||||
const renderWallGeometry = (
|
||||
walls: { x: number; y: number; z: number }[][]
|
||||
) => {
|
||||
const renderWallGeometry = (walls: THREE.Vector3[][]) => {
|
||||
walls.forEach((wall) => {
|
||||
if (wall.length < 2) return;
|
||||
|
||||
|
|
@ -117,19 +114,20 @@ export default function PolygonGenerator({
|
|||
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 wallGeometry = new THREE.BoxGeometry(length, wallHeight);
|
||||
const wallMaterial = new THREE.MeshBasicMaterial({
|
||||
color: "#aaa",
|
||||
transparent: true,
|
||||
opacity: 0.5,
|
||||
});
|
||||
const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
|
||||
const wallMesh = new THREE.Mesh(wallGeometry, wallMaterial);
|
||||
const midPoint = new THREE.Vector3()
|
||||
.addVectors(start, end)
|
||||
.multiplyScalar(0.5);
|
||||
|
|
@ -139,17 +137,7 @@ export default function PolygonGenerator({
|
|||
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);
|
||||
groupRef.current?.add(wallMesh);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue