Dwinzo-Beta/Dwinzo_dev
4
0
Fork 3
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added steering for vehicle

Browse Source
This commit is contained in:
Poovizhi99
2025-05-08 10:47:21 +05:30
parent f42a773dda
commit b701db7455
3 changed files with 395 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

544
app/src/modules/simulation/ui/vehicle/vehicleUI.tsx
View File

@@ -1,232 +1,380 @@
import React, { useEffect, useRef, useState } from 'react'; import React, { useEffect, useRef, useState } from "react";
import * as Types from "../../../../types/world/worldTypes"; import * as Types from "../../../../types/world/worldTypes";
import startPoint from "../../../../assets/gltf-glb/arrow_green.glb"; import startPoint from "../../../../assets/gltf-glb/arrow_green.glb";
import * as THREE from "three";
import startEnd from "../../../../assets/gltf-glb/arrow_red.glb"; import startEnd from "../../../../assets/gltf-glb/arrow_red.glb";
import { useGLTF } from '@react-three/drei'; import { useGLTF } from "@react-three/drei";
import { useFrame, useThree } from '@react-three/fiber'; import { useFrame, useThree } from "@react-three/fiber";
import { useSelectedEventSphere, useIsDragging, useIsRotating } from '../../../../store/simulation/useSimulationStore'; import {
import { useVehicleStore } from '../../../../store/simulation/useVehicleStore'; useSelectedEventSphere,
import { useProductStore } from '../../../../store/simulation/useProductStore'; useIsDragging,
import { useSelectedProduct } from '../../../../store/simulation/useSimulationStore'; useIsRotating,
import { upsertProductOrEventApi } from '../../../../services/simulation/UpsertProductOrEventApi'; } from "../../../../store/simulation/useSimulationStore";
import { useVehicleStore } from "../../../../store/simulation/useVehicleStore";
import { useProductStore } from "../../../../store/simulation/useProductStore";
import { useSelectedProduct } from "../../../../store/simulation/useSimulationStore";
import { upsertProductOrEventApi } from "../../../../services/simulation/UpsertProductOrEventApi";
import { Box3, DoubleSide, Euler, Group, Mesh, Plane, Quaternion, Vector3 } from "three";
import { position } from "html2canvas/dist/types/css/property-descriptors/position";
const VehicleUI = () => { const VehicleUI = () => {
const { scene: startScene } = useGLTF(startPoint) as any; const { scene: startScene } = useGLTF(startPoint) as any;
const { scene: endScene } = useGLTF(startEnd) as any; const { scene: endScene } = useGLTF(startEnd) as any;
const startMarker = useRef<THREE.Group>(null); const startMarker = useRef<Group>(null);
const endMarker = useRef<THREE.Group>(null); const endMarker = useRef<Group>(null);
const prevMousePos = useRef({ x: 0, y: 0 }); const prevMousePos = useRef({ x: 0, y: 0 });
const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventSphere } = useSelectedEventSphere();
const { selectedProduct } = useSelectedProduct(); const { selectedProduct } = useSelectedProduct();
const { getVehicleById } = useVehicleStore(); const { getVehicleById } = useVehicleStore();
const { updateEvent } = useProductStore(); const { updateEvent } = useProductStore();
const [startPosition, setStartPosition] = useState<[number, number, number]>([0, 0, 0]); const [startPosition, setStartPosition] = useState<[number, number, number]>([
const [endPosition, setEndPosition] = useState<[number, number, number]>([0, 0, 0]); 0, 1, 0,
const [startRotation, setStartRotation] = useState<[number, number, number]>([0, 0, 0]); ]);
const [endRotation, setEndRotation] = useState<[number, number, number]>([0, 0, 0]);
const { isDragging, setIsDragging } = useIsDragging();
const { isRotating, setIsRotating } = useIsRotating();
const { raycaster } = useThree();
const plane = useRef(new THREE.Plane(new THREE.Vector3(0, 1, 0), 0));
const state: Types.ThreeState = useThree();
const controls: any = state.controls;
const email = localStorage.getItem('email')
const organization = (email!.split("@")[1]).split(".")[0];
const updateBackend = ( const [endPosition, setEndPosition] = useState<[number, number, number]>([
productName: string, 0, 1, 0,
productId: string, ]);
organization: string, const [startRotation, setStartRotation] = useState<[number, number, number]>([
eventData: EventsSchema 0, 0, 0,
) => { ]);
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData
})
}
useEffect(() => { const [endRotation, setEndRotation] = useState<[number, number, number]>([
if (!selectedEventSphere) return; 0, 0, 0,
const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid); ]);
const [steeringRotation, setSteeringRotation] = useState<
[number, number, number]
>([0, 0, 0]);
if (selectedVehicle?.point?.action) { const { isDragging, setIsDragging } = useIsDragging();
const { pickUpPoint, unLoadPoint } = selectedVehicle.point.action; const { isRotating, setIsRotating } = useIsRotating();
const { raycaster } = useThree();
const [point, setPoint] = useState<
[number, number, number]
>([0, 0, 0]);
const plane = useRef(new Plane(new Vector3(0, 1, 0), 0));
const [tubeRotation, setTubeRotation] = useState<boolean>(false);
const tubeRef = useRef<Group>(null);
const outerGroup = useRef<Group>(null);
const state: Types.ThreeState = useThree();
const controls: any = state.controls;
const [selectedVehicleData, setSelectedVechicleData] = useState<
{ position: [number, number, number], rotation: [number, number, number], }
>({ position: [0, 0, 0], rotation: [0, 0, 0], });
const CIRCLE_RADIUS = 0.8;
const email = localStorage.getItem("email");
const organization = email!.split("@")[1].split(".")[0];
if (pickUpPoint) { const updateBackend = (
setStartPosition([pickUpPoint.position.x, 0, pickUpPoint.position.z]); productName: string,
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z]); productId: string,
organization: string,
eventData: EventsSchema
) => {
upsertProductOrEventApi({
productName: productName,
productId: productId,
organization: organization,
eventDatas: eventData,
});
};
useEffect(() => {
if (!selectedEventSphere) return;
const selectedVehicle = getVehicleById(
selectedEventSphere.userData.modelUuid
);
if (selectedVehicle) {
setSelectedVechicleData({ position: selectedVehicle.position, rotation: selectedVehicle.rotation });
setPoint(selectedVehicle.point.position)
}
setTimeout(() => {
if (selectedVehicle?.point?.action) {
const { pickUpPoint, unLoadPoint, steeringAngle } = selectedVehicle.point.action;
if (pickUpPoint && outerGroup.current) {
const worldPos = new Vector3(
pickUpPoint.position.x,
pickUpPoint.position.y,
pickUpPoint.position.z
);
const localPosition = outerGroup.current.worldToLocal(worldPos.clone());
setStartPosition([
localPosition.x,
selectedVehicle.point.position[1],
localPosition.z,
]);
setStartRotation([pickUpPoint.rotation.x, pickUpPoint.rotation.y, pickUpPoint.rotation.z,])
} else { } else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5); setStartPosition([0, selectedVehicle.point.position[1] + 0.1, 1.5]);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal); setStartRotation([0, 0, 0]);
setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]);
} }
// end point
if (unLoadPoint && outerGroup.current) {
const worldPos = new Vector3(unLoadPoint.position.x, unLoadPoint.position.y, unLoadPoint.position.z);
const localPosition = outerGroup.current.worldToLocal(worldPos);
if (unLoadPoint) { setEndPosition([localPosition.x, selectedVehicle.point.position[1], localPosition.z]);
setEndPosition([unLoadPoint.position.x, 0, unLoadPoint.position.z]); setEndRotation([
setEndRotation([unLoadPoint.rotation.x, unLoadPoint.rotation.y, unLoadPoint.rotation.z]); unLoadPoint.rotation.x,
unLoadPoint.rotation.y,
unLoadPoint.rotation.z,
]);
} else { } else {
const defaultLocal = new THREE.Vector3(0, 0, -1.5); setEndPosition([0, selectedVehicle.point.position[1] + 0.1, -1.5]);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal); setEndRotation([0, 0, 0]);
setEndPosition([defaultWorld.x, 0, defaultWorld.z]);
setEndRotation([0, 0, 0]);
} }
} setSteeringRotation([0, steeringAngle, 0])
}, [selectedEventSphere]); }
}, 10);
useFrame(() => {
if (!isDragging) return;
const intersectPoint = new THREE.Vector3();
const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (intersects) {
if (isDragging === "start") {
setStartPosition([intersectPoint.x, 0, intersectPoint.z]);
}
if (isDragging === "end") {
setEndPosition([intersectPoint.x, 0, intersectPoint.z]);
}
}
});
useFrame((state) => {
if (!isRotating) return;
const currentPointerX = state.pointer.x;
const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker = isRotating === "start" ? startMarker.current : endMarker.current;
if (marker) {
const rotationSpeed = 10;
if (isRotating === 'start') {
const y = startRotation[1] + deltaX * rotationSpeed;
setStartRotation([0, y, 0]);
} else {
const y = endRotation[1] + deltaX * rotationSpeed;
setEndRotation([0, y, 0]);
}
}
});
const handlePointerDown = (e: any, state: "start" | "end", rotation: "start" | "end") => { }, [selectedEventSphere, outerGroup.current]);
if (e.object.name === "handle") { const handlePointerDown = (
const normalizedX = (e.clientX / window.innerWidth) * 2 - 1; e: any,
const normalizedY = -(e.clientY / window.innerHeight) * 2 + 1; state: "start" | "end",
prevMousePos.current = { x: normalizedX, y: normalizedY }; rotation: "start" | "end"
setIsRotating(rotation); ) => {
if (controls) controls.enabled = false; if (e.object.name === "handle") {
setIsDragging(null); const normalizedX = (e.clientX / window.innerWidth) * 2 - 1;
const normalizedY = -(e.clientY / window.innerHeight) * 2 + 1;
prevMousePos.current = { x: normalizedX, y: normalizedY };
setIsRotating(rotation);
if (controls) controls.enabled = false;
setIsDragging(null);
} else {
setIsDragging(state);
setIsRotating(null);
if (controls) controls.enabled = false;
}
};
} else { const handlePointerUp = () => {
setIsDragging(state); controls.enabled = true;
setIsRotating(null); setIsDragging(null);
if (controls) controls.enabled = false; setIsRotating(null);
}
};
const handlePointerUp = () => { if (selectedEventSphere?.userData.modelUuid) {
controls.enabled = true; const updatedVehicle = getVehicleById(
setIsDragging(null); selectedEventSphere.userData.modelUuid
setIsRotating(null); );
if (selectedEventSphere?.userData.modelUuid) { let globalStartPosition = null;
const updatedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid); let globalEndPosition = null;
if (updatedVehicle) { if (outerGroup.current && startMarker.current && endMarker.current) {
const event = updateEvent(selectedProduct.productId, selectedEventSphere.userData.modelUuid, { const worldPosStart = new Vector3(...startPosition);
point: { globalStartPosition = outerGroup.current.localToWorld(worldPosStart.clone());
...updatedVehicle.point, const worldPosEnd = new Vector3(...endPosition);
action: { globalEndPosition = outerGroup.current.localToWorld(worldPosEnd.clone());
...updatedVehicle.point?.action, }
pickUpPoint: { if (updatedVehicle && globalEndPosition && globalStartPosition) {
position: { x: startPosition[0], y: startPosition[1], z: startPosition[2], }, const event = updateEvent(
rotation: { x: 0, y: startRotation[1], z: 0, }, selectedProduct.productId,
}, selectedEventSphere.userData.modelUuid,
unLoadPoint: { {
position: { x: endPosition[0], y: endPosition[1], z: endPosition[2], }, point: {
rotation: { x: 0, y: endRotation[1], z: 0, }, ...updatedVehicle.point,
}, action: {
...updatedVehicle.point?.action,
pickUpPoint: {
position: {
x: globalStartPosition.x,
y: 0,
z: globalStartPosition.z,
},
rotation: { x: 0, y: startRotation[1], z: 0 },
}, },
}, unLoadPoint: {
}) position: {
x: globalEndPosition.x,
y: 0,
z: globalEndPosition.z,
},
rotation: { x: 0, y: endRotation[1], z: 0 },
},
steeringAngle: steeringRotation[1]
},
},
}
);
if (event) { if (event) {
updateBackend( updateBackend(
selectedProduct.productName, selectedProduct.productName,
selectedProduct.productId, selectedProduct.productId,
organization, organization,
event event
); );
}
} }
} }
}; }
};
useEffect(() => { useFrame(() => {
const handleGlobalPointerUp = () => { if (!isDragging || !plane.current || !raycaster || !outerGroup.current) return;
setIsDragging(null); const intersectPoint = new Vector3();
setIsRotating(null); const intersects = raycaster.ray.intersectPlane(plane.current, intersectPoint);
if (controls) controls.enabled = true; if (!intersects) return;
handlePointerUp(); const localPoint = outerGroup?.current.worldToLocal(intersectPoint.clone());
}; if (isDragging === "start") {
if (startMarker.current) {
if (isDragging || isRotating) { }
window.addEventListener("pointerup", handleGlobalPointerUp); setStartPosition([localPoint.x, point[1], localPoint.z]);
} } else if (isDragging === "end") {
setEndPosition([localPoint.x, point[1], localPoint.z]);
}
});
return () => { useEffect(() => {
window.removeEventListener("pointerup", handleGlobalPointerUp); const handleGlobalPointerUp = () => {
}; setIsDragging(null);
}, [isDragging, isRotating, startPosition, startRotation, endPosition, endRotation]); setIsRotating(null);
setTubeRotation(false);
if (controls) controls.enabled = true;
handlePointerUp();
return ( };
startPosition.length > 0 && endPosition.length > 0 ? (
<mesh> if (isDragging || isRotating || tubeRotation) {
<primitive window.addEventListener("pointerup", handleGlobalPointerUp);
name="start" }
object={startScene}
ref={startMarker} return () => {
position={startPosition} window.removeEventListener("pointerup", handleGlobalPointerUp);
rotation={startRotation} };
onPointerDown={(e: any) => { }, [
e.stopPropagation(); isDragging, isRotating, startPosition, startRotation, endPosition, endRotation, tubeRotation, steeringRotation, outerGroup.current, tubeRef.current
handlePointerDown(e, "start", "start"); ]);
}}
onPointerMissed={() => {
controls.enabled = true; const prevSteeringY = useRef(0);
setIsDragging(null); useFrame((state) => {
setIsRotating(null); if (tubeRotation) {
}} const currentPointerX = state.pointer.x;
/> const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker = tubeRef.current;
if (marker) {
const rotationSpeed = 2;
marker.rotation.y += deltaX * rotationSpeed;
setSteeringRotation([marker.rotation.x, marker.rotation.y, marker.rotation.z]);
}
} else {
prevSteeringY.current = 0;
}
});
useFrame((state) => {
if (!isRotating) return;
const currentPointerX = state.pointer.x;
const deltaX = currentPointerX - prevMousePos.current.x;
prevMousePos.current.x = currentPointerX;
const marker =
isRotating === "start" ? startMarker.current : endMarker.current;
if (marker) {
const rotationSpeed = 10;
marker.rotation.y += deltaX * rotationSpeed;
if (isRotating === "start") {
setStartRotation([
marker.rotation.x,
marker.rotation.y,
marker.rotation.z,
]);
} else {
setEndRotation([
marker.rotation.x,
marker.rotation.y,
marker.rotation.z,
]);
}
}
});
return selectedVehicleData ? (
<group position={selectedVehicleData.position} rotation={selectedVehicleData.rotation} ref={outerGroup}>
<group
position={[0, 0, 0]}
ref={tubeRef}
rotation={steeringRotation}
onPointerDown={(e) => {
e.stopPropagation();
setTubeRotation(true);
prevMousePos.current.x = e.pointer.x;
controls.enabled = false;
}}
onPointerMissed={() => {
controls.enabled = true;
setTubeRotation(false);
}}
onPointerUp={() => {
controls.enabled = true;
setTubeRotation(false);
}}
>
(
<mesh
position={[0, point[1], 0]}
rotation={[-Math.PI / 2, 0, 0]}
name="steering"
>
<ringGeometry args={[CIRCLE_RADIUS, CIRCLE_RADIUS + 0.2, 36]} />
<meshBasicMaterial color="yellow" side={DoubleSide} />
<primitive
name="end"
object={endScene}
ref={endMarker}
position={endPosition}
rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
</mesh> </mesh>
) : null <mesh position={[0, point[1], CIRCLE_RADIUS + 0.24]} rotation={[Math.PI / 2, 0, 0]}>
); <coneGeometry args={[0.1, 0.3, 12]} />
} <meshBasicMaterial color="yellow" side={DoubleSide} />
</mesh>
)
</group>
{/* Start Marker */}
<primitive
name="startMarker"
object={startScene}
ref={startMarker}
position={startPosition}
rotation={startRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "start", "start");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
{/* End Marker */}
<primitive
name="endMarker"
object={endScene}
ref={endMarker}
position={endPosition}
rotation={endRotation}
onPointerDown={(e: any) => {
e.stopPropagation();
handlePointerDown(e, "end", "end");
}}
onPointerMissed={() => {
controls.enabled = true;
setIsDragging(null);
setIsRotating(null);
}}
/>
</group>
) : null;
};
export default VehicleUI; export default VehicleUI;

38
app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx
View File

@@ -33,6 +33,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
let fixedInterval: number; let fixedInterval: number;
let coveredDistance = progressRef.current; let coveredDistance = progressRef.current;
let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined; let objectRotation = (agvDetail.point?.action?.pickUpPoint?.rotation || { x: 0, y: 0, z: 0 }) as { x: number; y: number; z: number } | undefined;
const [rotatingToSteering, setRotatingToSteering] = useState(false);
useEffect(() => { useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) { if (currentPhase === 'stationed-pickup' && path.length > 0) {
@@ -133,18 +134,39 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
} }
if (progressRef.current >= totalDistance) { if (progressRef.current >= totalDistance) {
if (restRotation && objectRotation) { const restQuaternion = objectRotation ?
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z)); new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z)) :
object.quaternion.slerp(targetQuaternion, delta * 2); object.quaternion.clone();
const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) { const steeringQuaternion = new THREE.Quaternion().setFromEuler(
object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z); new THREE.Euler(objectRotation ? objectRotation.x : object.rotation.x,
agvDetail.point.action.steeringAngle,
objectRotation ? objectRotation.z : object.rotation.z)
);
if (restRotation) {
object.quaternion.slerp(restQuaternion, delta * 2);
const restAngleDiff = object.quaternion.angleTo(restQuaternion);
if (restAngleDiff < 0.01) {
setRestingRotation(false); setRestingRotation(false);
setRotatingToSteering(true);
}
return;
}
else if (rotatingToSteering) {
object.quaternion.slerp(steeringQuaternion, delta * 2);
const steeringAngleDiff = object.quaternion.angleTo(steeringQuaternion);
if (steeringAngleDiff < 0.01) {
object.rotation.set(
objectRotation ? objectRotation.x : object.rotation.x,
agvDetail.point.action.steeringAngle,
objectRotation ? objectRotation.z : object.rotation.z
);
setRotatingToSteering(false);
} }
return; return;
} }
} }
if (progressRef.current >= totalDistance) { if (progressRef.current >= totalDistance) {
setRestingRotation(true); setRestingRotation(true);
progressRef.current = 0; progressRef.current = 0;
@@ -199,7 +221,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
return ( return (
<> <>
{currentPath.length > 0 && ( {currentPath.length > 0 && (
<group visible={false}> <group >
<Line points={currentPath} color="blue" lineWidth={3} /> <Line points={currentPath} color="blue" lineWidth={3} />
{currentPath.map((point, index) => ( {currentPath.map((point, index) => (
<mesh key={index} position={point}> <mesh key={index} position={point}>

29
app/src/modules/simulation/vehicle/vehicles.tsx
View File

@@ -1,31 +1,40 @@
import { useEffect } from "react"; import { useEffect, useState } from "react";
import VehicleInstances from "./instances/vehicleInstances"; import VehicleInstances from "./instances/vehicleInstances";
import { useVehicleStore } from "../../../store/simulation/useVehicleStore"; import { useVehicleStore } from "../../../store/simulation/useVehicleStore";
import { useSelectedEventData, useSelectedEventSphere } from "../../../store/simulation/useSimulationStore"; import { useSelectedEventSphere } from "../../../store/simulation/useSimulationStore";
import VehicleUI from "../ui/vehicle/vehicleUI"; import VehicleUI from "../ui/vehicle/vehicleUI";
import { usePlayButtonStore } from "../../../store/usePlayButtonStore"; import { usePlayButtonStore } from "../../../store/usePlayButtonStore";
function Vehicles() { function Vehicles() {
const { vehicles } = useVehicleStore(); const { vehicles, getVehicleById } = useVehicleStore();
const { selectedEventSphere } = useSelectedEventSphere(); const { selectedEventSphere } = useSelectedEventSphere();
const { selectedEventData } = useSelectedEventData();
const { isPlaying } = usePlayButtonStore(); const { isPlaying } = usePlayButtonStore();
const [isVehicleSelected, setIsVehicleSelected] = useState(false);
useEffect(() => { useEffect(() => {
// console.log('vehicles: ', vehicles); // console.log('vehicles: ', vehicles);
}, [vehicles]) }, [vehicles])
useEffect(() => {
if (selectedEventSphere) {
const selectedVehicle = getVehicleById(selectedEventSphere.userData.modelUuid);
if (selectedVehicle) {
setIsVehicleSelected(true);
} else {
setIsVehicleSelected(false);
}
}
}, [selectedEventSphere])
return ( return (
<> <>
<VehicleInstances /> <VehicleInstances />
{isVehicleSelected && selectedEventSphere && !isPlaying &&
{selectedEventSphere && selectedEventData?.data.type === "vehicle" && !isPlaying && <VehicleUI />
< VehicleUI />
} }
</> </>
); );
} }
export default Vehicles; export default Vehicles;