|
|
|
|
@@ -1,10 +1,11 @@
|
|
|
|
|
import { useEffect, useRef, useState } from 'react'
|
|
|
|
|
import { useFrame, useThree } from '@react-three/fiber';
|
|
|
|
|
import { useFloorItems } from '../../../../../store/store';
|
|
|
|
|
import { useActiveTool, useFloorItems } from '../../../../../store/store';
|
|
|
|
|
import * as THREE from 'three';
|
|
|
|
|
import { Line } from '@react-three/drei';
|
|
|
|
|
import { useAnimationPlaySpeed, usePauseButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
|
|
|
|
|
import { useAnimationPlaySpeed, usePauseButtonStore, usePlayButtonStore, useResetButtonStore } from '../../../../../store/usePlayButtonStore';
|
|
|
|
|
import { useVehicleStore } from '../../../../../store/simulation/useVehicleStore';
|
|
|
|
|
import useModuleStore from '../../../../../store/useModuleStore';
|
|
|
|
|
|
|
|
|
|
interface VehicleAnimatorProps {
|
|
|
|
|
path: [number, number, number][];
|
|
|
|
|
@@ -18,8 +19,10 @@ interface VehicleAnimatorProps {
|
|
|
|
|
function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetail, reset }: VehicleAnimatorProps) {
|
|
|
|
|
const { decrementVehicleLoad, vehicles } = useVehicleStore();
|
|
|
|
|
const { isPaused } = usePauseButtonStore();
|
|
|
|
|
const { isPlaying, setIsPlaying } = usePlayButtonStore();
|
|
|
|
|
const { activeModule } = useModuleStore();
|
|
|
|
|
const { speed } = useAnimationPlaySpeed();
|
|
|
|
|
const { isReset } = useResetButtonStore();
|
|
|
|
|
const { isReset, setReset } = useResetButtonStore();
|
|
|
|
|
const [restRotation, setRestingRotation] = useState<boolean>(true);
|
|
|
|
|
const [progress, setProgress] = useState<number>(0);
|
|
|
|
|
const [currentPath, setCurrentPath] = useState<[number, number, number][]>([]);
|
|
|
|
|
@@ -30,6 +33,12 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|
|
|
|
let startTime: number;
|
|
|
|
|
let pausedTime: number;
|
|
|
|
|
let fixedInterval: number;
|
|
|
|
|
let coveredDistance = progressRef.current;
|
|
|
|
|
let accumulatedDistance = 0;
|
|
|
|
|
let index = 0;
|
|
|
|
|
const isPausedRef = useRef(false);
|
|
|
|
|
const pauseTimeRef = useRef<number | null>(null);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
if (currentPhase === 'stationed-pickup' && path.length > 0) {
|
|
|
|
|
@@ -45,118 +54,52 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|
|
|
|
setProgress(0);
|
|
|
|
|
completedRef.current = false;
|
|
|
|
|
}, [currentPath]);
|
|
|
|
|
// useEffect(() => {
|
|
|
|
|
// console.log('isReset: ', isReset);
|
|
|
|
|
// if (isReset) {
|
|
|
|
|
// reset();
|
|
|
|
|
// setCurrentPath([]);
|
|
|
|
|
// setProgress(0);
|
|
|
|
|
// completedRef.current = false;
|
|
|
|
|
// decrementVehicleLoad(agvDetail.modelUuid, 0)
|
|
|
|
|
// }
|
|
|
|
|
// }, [isReset])
|
|
|
|
|
|
|
|
|
|
// useFrame((_, delta) => {
|
|
|
|
|
// const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
|
|
|
// if (!object || currentPath.length < 2) return;
|
|
|
|
|
// if (isPaused) return;
|
|
|
|
|
|
|
|
|
|
// let totalDistance = 0;
|
|
|
|
|
// const distances = [];
|
|
|
|
|
|
|
|
|
|
// for (let i = 0; i < currentPath.length - 1; i++) {
|
|
|
|
|
// const start = new THREE.Vector3(...currentPath[i]);
|
|
|
|
|
// const end = new THREE.Vector3(...currentPath[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(...currentPath[index]);
|
|
|
|
|
// const end = new THREE.Vector3(...currentPath[index + 1]);
|
|
|
|
|
// const segmentDistance = distances[index];
|
|
|
|
|
|
|
|
|
|
// const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
|
|
|
|
// const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
|
|
|
|
// const rotationSpeed = 2.0;
|
|
|
|
|
// const currentAngle = object.rotation.y;
|
|
|
|
|
|
|
|
|
|
// let angleDifference = targetAngle - currentAngle;
|
|
|
|
|
// if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
|
|
|
|
// if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
|
|
|
|
|
|
|
|
|
// const maxRotationStep = rotationSpeed * delta;
|
|
|
|
|
// object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
|
|
|
|
|
|
|
|
|
// const isAligned = Math.abs(angleDifference) < 0.01;
|
|
|
|
|
|
|
|
|
|
// if (isAligned) {
|
|
|
|
|
// progressRef.current += delta * (speed * agvDetail.speed);
|
|
|
|
|
// coveredDistance = progressRef.current;
|
|
|
|
|
|
|
|
|
|
// const t = (coveredDistance - accumulatedDistance) / segmentDistance;
|
|
|
|
|
// const position = start.clone().lerp(end, t);
|
|
|
|
|
// object.position.copy(position);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// if (progressRef.current >= totalDistance) {
|
|
|
|
|
// if (restRotation) {
|
|
|
|
|
// const targetQuaternion = new THREE.Quaternion().setFromEuler(new THREE.Euler(0, 0, 0));
|
|
|
|
|
// object.quaternion.slerp(targetQuaternion, delta * 2);
|
|
|
|
|
// const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
|
|
|
|
// if (angleDiff < 0.01) {
|
|
|
|
|
// let objectRotation = agvDetail.point.rotation
|
|
|
|
|
// object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
|
|
|
// setRestingRotation(false);
|
|
|
|
|
// }
|
|
|
|
|
// return;
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// if (progressRef.current >= totalDistance) {
|
|
|
|
|
// setRestingRotation(true);
|
|
|
|
|
// progressRef.current = 0;
|
|
|
|
|
// movingForward.current = !movingForward.current;
|
|
|
|
|
// setCurrentPath([]);
|
|
|
|
|
// handleCallBack();
|
|
|
|
|
// if (currentPhase === 'pickup-drop') {
|
|
|
|
|
// requestAnimationFrame(firstFrame);
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('isReset: ', isReset);
|
|
|
|
|
if (isReset) {
|
|
|
|
|
reset();
|
|
|
|
|
setCurrentPath([]);
|
|
|
|
|
setProgress(0);
|
|
|
|
|
progressRef.current = 0;
|
|
|
|
|
completedRef.current = false;
|
|
|
|
|
movingForward.current = true;
|
|
|
|
|
setRestingRotation(false);
|
|
|
|
|
progressRef.current = 0;
|
|
|
|
|
startTime = 0;
|
|
|
|
|
coveredDistance = 0;
|
|
|
|
|
setReset(false);
|
|
|
|
|
setRestingRotation(true);
|
|
|
|
|
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
|
|
|
|
console.log('agvDetail: ', vehicles);
|
|
|
|
|
const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
|
|
|
if (object) {
|
|
|
|
|
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2]);
|
|
|
|
|
let objectRotation = agvDetail.point.rotation
|
|
|
|
|
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [isReset]);
|
|
|
|
|
}, [isReset])
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
console.log('isPlaying: ', isPlaying);
|
|
|
|
|
if (!isPlaying) {
|
|
|
|
|
reset();
|
|
|
|
|
setCurrentPath([]);
|
|
|
|
|
setProgress(0);
|
|
|
|
|
completedRef.current = false;
|
|
|
|
|
movingForward.current = true;
|
|
|
|
|
progressRef.current = 0;
|
|
|
|
|
startTime = 0;
|
|
|
|
|
coveredDistance = 0;
|
|
|
|
|
setReset(false);
|
|
|
|
|
setRestingRotation(true);
|
|
|
|
|
decrementVehicleLoad(agvDetail.modelUuid, 0);
|
|
|
|
|
const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
|
|
|
if (object) {
|
|
|
|
|
object.position.set(agvDetail.position[0], agvDetail.position[1], agvDetail.position[2])
|
|
|
|
|
let objectRotation = agvDetail.point.rotation
|
|
|
|
|
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}, [isPlaying])
|
|
|
|
|
|
|
|
|
|
useFrame((_, delta) => {
|
|
|
|
|
// If reset is active, don't run anything in frame
|
|
|
|
|
if (isReset) return;
|
|
|
|
|
|
|
|
|
|
const object = scene.getObjectByProperty('uuid', agvUuid);
|
|
|
|
|
if (!object || currentPath.length < 2) return;
|
|
|
|
|
if (isPaused) return;
|
|
|
|
|
@@ -172,11 +115,11 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|
|
|
|
totalDistance += segmentDistance;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let coveredDistance = progressRef.current;
|
|
|
|
|
let accumulatedDistance = 0;
|
|
|
|
|
let index = 0;
|
|
|
|
|
|
|
|
|
|
while (index < distances.length && coveredDistance > accumulatedDistance + distances[index]) {
|
|
|
|
|
while (
|
|
|
|
|
index < distances.length &&
|
|
|
|
|
coveredDistance > accumulatedDistance + distances[index]
|
|
|
|
|
) {
|
|
|
|
|
accumulatedDistance += distances[index];
|
|
|
|
|
index++;
|
|
|
|
|
}
|
|
|
|
|
@@ -188,17 +131,16 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|
|
|
|
|
|
|
|
|
const currentDirection = new THREE.Vector3().subVectors(end, start).normalize();
|
|
|
|
|
const targetAngle = Math.atan2(currentDirection.x, currentDirection.z);
|
|
|
|
|
|
|
|
|
|
const rotationSpeed = speed;
|
|
|
|
|
const currentAngle = object.rotation.y;
|
|
|
|
|
|
|
|
|
|
let angleDifference = targetAngle - currentAngle;
|
|
|
|
|
if (angleDifference > Math.PI) angleDifference -= 2 * Math.PI;
|
|
|
|
|
if (angleDifference < -Math.PI) angleDifference += 2 * Math.PI;
|
|
|
|
|
|
|
|
|
|
const rotationSpeed = 2.0;
|
|
|
|
|
const maxRotationStep = rotationSpeed * delta;
|
|
|
|
|
const rotationStep = Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
|
|
|
|
object.rotation.y += rotationStep;
|
|
|
|
|
|
|
|
|
|
object.rotation.y += Math.sign(angleDifference) * Math.min(Math.abs(angleDifference), maxRotationStep);
|
|
|
|
|
const isAligned = Math.abs(angleDifference) < 0.01;
|
|
|
|
|
|
|
|
|
|
if (isAligned) {
|
|
|
|
|
@@ -217,46 +159,104 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai
|
|
|
|
|
object.quaternion.slerp(targetQuaternion, delta * 2);
|
|
|
|
|
const angleDiff = object.quaternion.angleTo(targetQuaternion);
|
|
|
|
|
if (angleDiff < 0.01) {
|
|
|
|
|
const objectRotation = agvDetail.point.rotation;
|
|
|
|
|
let objectRotation = agvDetail.point.rotation
|
|
|
|
|
object.rotation.set(objectRotation[0], objectRotation[1], objectRotation[2]);
|
|
|
|
|
setRestingRotation(false);
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
setRestingRotation(true);
|
|
|
|
|
progressRef.current = 0;
|
|
|
|
|
movingForward.current = !movingForward.current;
|
|
|
|
|
setCurrentPath([]);
|
|
|
|
|
handleCallBack();
|
|
|
|
|
if (currentPhase === 'pickup-drop') {
|
|
|
|
|
requestAnimationFrame(firstFrame);
|
|
|
|
|
}
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (progressRef.current >= totalDistance) {
|
|
|
|
|
setRestingRotation(true);
|
|
|
|
|
progressRef.current = 0;
|
|
|
|
|
movingForward.current = !movingForward.current;
|
|
|
|
|
setCurrentPath([]);
|
|
|
|
|
handleCallBack();
|
|
|
|
|
if (currentPhase === 'pickup-drop') {
|
|
|
|
|
requestAnimationFrame(firstFrame);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
let pauseTime: number = 0;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
|
// Update the pause state in the ref
|
|
|
|
|
isPausedRef.current = isPaused;
|
|
|
|
|
}, [isPaused]);
|
|
|
|
|
function firstFrame() {
|
|
|
|
|
const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
|
|
|
|
const droppedMaterial = agvDetail.currentLoad;
|
|
|
|
|
fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
|
|
|
|
fixedInterval = ((unLoadDuration / droppedMaterial) * 1000) / speed;
|
|
|
|
|
// fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
|
|
|
|
startTime = performance.now();
|
|
|
|
|
step(droppedMaterial);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function step(droppedMaterial: number) {
|
|
|
|
|
const elapsedTime = (performance.now() - startTime) * speed;
|
|
|
|
|
if (isPausedRef.current) {
|
|
|
|
|
// Handle pause logic
|
|
|
|
|
if (!pauseTimeRef.current) {
|
|
|
|
|
pauseTimeRef.current = performance.now(); // Set pause time only once
|
|
|
|
|
}
|
|
|
|
|
requestAnimationFrame(() => step(droppedMaterial)); // Continue calling step during pause
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (pauseTimeRef.current) {
|
|
|
|
|
// Adjust start time after resuming from pause
|
|
|
|
|
const pauseDuration = performance.now() - pauseTimeRef.current;
|
|
|
|
|
startTime += pauseDuration;
|
|
|
|
|
pauseTimeRef.current = null; // Clear pause time
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const elapsedTime = performance.now() - startTime; // Calculate elapsed time
|
|
|
|
|
|
|
|
|
|
if (elapsedTime >= fixedInterval) {
|
|
|
|
|
console.log('fixedInterval: ', fixedInterval);
|
|
|
|
|
console.log('elapsedTime: ', elapsedTime);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
let droppedMat = droppedMaterial - 1;
|
|
|
|
|
decrementVehicleLoad(agvDetail.modelUuid, 1);
|
|
|
|
|
if (droppedMat === 0) return;
|
|
|
|
|
startTime = performance.now();
|
|
|
|
|
requestAnimationFrame(() => step(droppedMat));
|
|
|
|
|
decrementVehicleLoad(agvDetail.modelUuid, 1); // Decrement vehicle load
|
|
|
|
|
|
|
|
|
|
if (droppedMat > 0) {
|
|
|
|
|
// Reset start time for the next step
|
|
|
|
|
startTime = performance.now();
|
|
|
|
|
requestAnimationFrame(() => step(droppedMat)); // Continue with the next step
|
|
|
|
|
} else {
|
|
|
|
|
|
|
|
|
|
return; // Exit when all materials are dropped
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
requestAnimationFrame(() => step(droppedMaterial));
|
|
|
|
|
requestAnimationFrame(() => step(droppedMaterial)); // Continue animation
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// function firstFrame() {
|
|
|
|
|
// const unLoadDuration = agvDetail.point.action.unLoadDuration;
|
|
|
|
|
// const droppedMaterial = agvDetail.currentLoad;
|
|
|
|
|
// fixedInterval = (unLoadDuration / droppedMaterial) * 1000;
|
|
|
|
|
// startTime = performance.now();
|
|
|
|
|
// step(droppedMaterial);
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
// function step(droppedMaterial: number) {
|
|
|
|
|
// const elapsedTime = (performance.now() - startTime) * speed;
|
|
|
|
|
// if (elapsedTime >= fixedInterval) {
|
|
|
|
|
//
|
|
|
|
|
//
|
|
|
|
|
// let droppedMat = droppedMaterial - 1;
|
|
|
|
|
// decrementVehicleLoad(agvDetail.modelUuid, 1);
|
|
|
|
|
// if (droppedMat === 0) return;
|
|
|
|
|
// startTime = performance.now();
|
|
|
|
|
// requestAnimationFrame(() => step(droppedMat));
|
|
|
|
|
// } else {
|
|
|
|
|
// requestAnimationFrame(() => step(droppedMaterial));
|
|
|
|
|
// }
|
|
|
|
|
// }
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
{currentPath.length > 0 && (
|
|
|
|
|
|