added ui and its functionality for changing position of vehicles pickup-point and unloadPoint
This commit is contained in:
parent
9574d70b56
commit
4b87650528
|
@ -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>
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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]),
|
||||||
|
|
|
@ -190,7 +190,8 @@ function Vehicles() {
|
||||||
// }
|
// }
|
||||||
]);
|
]);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
console.log("vehicles", vehicles);
|
console.log('vehicles: ', vehicles);
|
||||||
|
|
||||||
}, [vehicles])
|
}, [vehicles])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
Loading…
Reference in New Issue