added ui and its functionality for changing position of vehicles pickup-point and unloadPoint

This commit is contained in:
Poovizhi99 2025-04-30 11:32:13 +05:30
parent 9574d70b56
commit 4b87650528
4 changed files with 42 additions and 25 deletions

View File

@ -46,18 +46,17 @@ const VehicleUI = () => {
pickUpPoint.rotation.y, pickUpPoint.rotation.y,
pickUpPoint.rotation.z pickUpPoint.rotation.z
); );
pickupPosition.y = 0; // Force y to 0 pickupPosition.y = 0;
setStartPosition([pickupPosition.x, 0, pickupPosition.z]); setStartPosition([pickupPosition.x, 0, pickupPosition.z]);
setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]); setStartRotation([pickupRotation.x, pickupRotation.y, pickupRotation.z]);
} else { } else {
const defaultLocal = new THREE.Vector3(0, 0, 1.5); const defaultLocal = new THREE.Vector3(0, 0, 1.5);
const defaultWorld = selectedEventSphere.localToWorld(defaultLocal); const defaultWorld = selectedEventSphere.localToWorld(defaultLocal);
defaultWorld.y = 0; // Force y to 0 defaultWorld.y = 0;
setStartPosition([defaultWorld.x, 0, defaultWorld.z]); setStartPosition([defaultWorld.x, 0, defaultWorld.z]);
setStartRotation([0, 0, 0]); setStartRotation([0, 0, 0]);
} }
// Initialize end marker position and rotation
if (unLoadPoint) { if (unLoadPoint) {
const unLoadPosition = new THREE.Vector3( const unLoadPosition = new THREE.Vector3(
unLoadPoint.position.x, unLoadPoint.position.x,
@ -109,8 +108,13 @@ const VehicleUI = () => {
if (marker) { if (marker) {
const rotationSpeed = 10; const rotationSpeed = 10;
marker.rotation.y -= deltaX * rotationSpeed; 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])
}
} }
}); });
@ -133,7 +137,6 @@ const VehicleUI = () => {
}; };
const handlePointerUp = () => { const handlePointerUp = () => {
console.log("nulll");
controls.enabled = true; controls.enabled = true;
setIsDragging(null); setIsDragging(null);
setIsRotating(null); setIsRotating(null);
@ -180,7 +183,22 @@ const VehicleUI = () => {
} }
}; };
useEffect(() => {
const handleGlobalPointerUp = () => {
setIsDragging(null);
setIsRotating(null);
if (controls) controls.enabled = true;
handlePointerUp();
};
if (isDragging || isRotating) {
window.addEventListener("pointerup", handleGlobalPointerUp);
}
return () => {
window.removeEventListener("pointerup", handleGlobalPointerUp);
};
}, [isDragging, isRotating, startPosition, startRotation, endPosition, endRotation]);
return ( return (
startPosition.length > 0 && endPosition.length > 0 ? ( startPosition.length > 0 && endPosition.length > 0 ? (
@ -194,12 +212,10 @@ const VehicleUI = () => {
e.stopPropagation(); e.stopPropagation();
handlePointerDown(e, "start", "start"); handlePointerDown(e, "start", "start");
}} }}
onPointerUp={() => {
handlePointerUp();
}}
onPointerMissed={() => { onPointerMissed={() => {
console.log("start pointermissed"); controls.enabled = true;
handlePointerUp(); setIsDragging(null);
setIsRotating(null);
}} }}
/> />
@ -212,13 +228,10 @@ const VehicleUI = () => {
e.stopPropagation(); e.stopPropagation();
handlePointerDown(e, "end", "end"); handlePointerDown(e, "end", "end");
}} }}
onPointerUp={() => {
console.log("up");
handlePointerUp();
}}
onPointerMissed={() => { onPointerMissed={() => {
console.log("end pointermissed"); controls.enabled = true;
handlePointerUp(); setIsDragging(null);
setIsRotating(null);
}} }}
/> />
</mesh> </mesh>

View File

@ -32,14 +32,18 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
let startTime: number; let startTime: number;
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 };
useEffect(() => { useEffect(() => {
if (currentPhase === 'stationed-pickup' && path.length > 0) { if (currentPhase === 'stationed-pickup' && path.length > 0) {
setCurrentPath(path); setCurrentPath(path);
objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
} else if (currentPhase === 'pickup-drop' && path.length > 0) { } else if (currentPhase === 'pickup-drop' && path.length > 0) {
objectRotation = agvDetail.point.action?.unLoadPoint?.rotation
setCurrentPath(path); setCurrentPath(path);
} else if (currentPhase === 'drop-pickup' && path.length > 0) { } else if (currentPhase === 'drop-pickup' && path.length > 0) {
objectRotation = agvDetail.point.action?.pickUpPoint?.rotation
setCurrentPath(path); setCurrentPath(path);
} }
}, [currentPhase, path]); }, [currentPhase, path]);
@ -63,10 +67,10 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
setRestingRotation(true); setRestingRotation(true);
decrementVehicleLoad(agvDetail.modelUuid, 0); decrementVehicleLoad(agvDetail.modelUuid, 0);
const object = scene.getObjectByProperty('uuid', agvUuid); const object = scene.getObjectByProperty('uuid', agvUuid);
console.log('currentPhase: ', currentPhase);
if (object) { if (object) {
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]); object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
let objectRotation = agvDetail.point.rotation object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
} }
} }
}, [isReset, isPlaying]) }, [isReset, isPlaying])
@ -129,12 +133,11 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
if (progressRef.current >= totalDistance) { if (progressRef.current >= totalDistance) {
if (restRotation) { if (restRotation) {
const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0)); const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(objectRotation.x, objectRotation.y, objectRotation.z));
object.quaternion.slerp(targetQuaternion, delta * 2); object.quaternion.slerp(targetQuaternion, delta * 2);
const angleDiff = object.quaternion.angleTo(targetQuaternion); const angleDiff = object.quaternion.angleTo(targetQuaternion);
if (angleDiff < 0.01) { if (angleDiff < 0.01) {
let objectRotation = agvDetail.point.rotation object.rotation.set(objectRotation.x, objectRotation.y, objectRotation.z);
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
setRestingRotation(false); setRestingRotation(false);
} }
return; return;

View File

@ -30,7 +30,7 @@ function VehicleInstance({ agvDetail }: any) {
); );
function vehicleStatus(modelId: string, status: string) { function vehicleStatus(modelId: string, status: string) {
console.log(`AGV ${modelId}: ${status}`); // console.log(`${modelId} , ${status});
} }
// Function to reset everything // Function to reset everything
@ -43,7 +43,7 @@ function VehicleInstance({ agvDetail }: any) {
const increment = () => { const increment = () => {
if (isIncrememtable.current) { if (isIncrememtable.current) {
console.log('called');
incrementVehicleLoad(agvDetail.modelUuid, 2); incrementVehicleLoad(agvDetail.modelUuid, 2);
isIncrememtable.current = false; isIncrememtable.current = false;
} }
@ -51,7 +51,7 @@ function VehicleInstance({ agvDetail }: any) {
useEffect(() => { useEffect(() => {
if (isPlaying) { if (isPlaying) {
if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') { if (!agvDetail.isActive && agvDetail.state === 'idle' && currentPhase === 'stationed') {
const toPickupPath = computePath( const toPickupPath = computePath(
new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2]), new THREE.Vector3(agvDetail?.position[0], agvDetail?.position[1], agvDetail?.position[2]),

View File

@ -190,7 +190,8 @@ function Vehicles() {
// } // }
]); ]);
useEffect(() => { useEffect(() => {
console.log("vehicles", vehicles); console.log('vehicles: ', vehicles);
}, [vehicles]) }, [vehicles])
useEffect(() => { useEffect(() => {