diff --git a/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx index a2802a0..4b9eb1c 100644 --- a/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx +++ b/app/src/modules/simulation/vehicle/instances/animator/materialAnimator.tsx @@ -1,43 +1,61 @@ import { useEffect, useRef, useState } from 'react'; import { useThree, useFrame } from '@react-three/fiber'; import * as THREE from 'three'; +import { MaterialModel } from '../../../materials/instances/material/materialModel'; +import { Html } from '@react-three/drei'; type MaterialAnimatorProps = { agvDetail: VehicleStatus; }; + const MaterialAnimator = ({ agvDetail }: MaterialAnimatorProps) => { - const meshRef = useRef(null!); - const [hasLoad, setHasLoad] = useState(false); + const meshRef = useRef(null!); + const [hasLoad, setHasLoad] = useState(false); const { scene } = useThree(); - const loadWorldPosition = new THREE.Vector3(); - const offset = new THREE.Vector3(0, 1.1, 0); + const offset = new THREE.Vector3(0, 0.85, 0); + const [htmlPosition, setHtmlPosition] = useState<[number, number, number]>([0, 0, 0]); + const [htmlRotation, setHtmlRotation] = useState<[number, number, number]>([0, 0, 0]); useEffect(() => { setHasLoad(agvDetail.currentLoad > 0); - }, [agvDetail]); + }, [agvDetail.currentLoad]); useFrame(() => { - if (!hasLoad) return; + if (!hasLoad || !meshRef.current) return; + const agvModel = scene.getObjectByProperty("uuid", agvDetail.modelUuid) as THREE.Object3D; - if (agvModel && meshRef.current) { - loadWorldPosition.copy(offset).applyMatrix4(agvModel.matrixWorld); - meshRef.current.position.copy(loadWorldPosition); + if (agvModel) { + const worldPosition = offset.clone().applyMatrix4(agvModel.matrixWorld); + meshRef.current.position.copy(worldPosition); + setHtmlPosition([worldPosition.x, worldPosition.y, worldPosition.z]); meshRef.current.rotation.copy(agvModel.rotation); + setHtmlRotation([agvModel.rotation.x, agvModel.rotation.y, agvModel.rotation.z]); } }); - return ( <> {hasLoad && ( - - - - + <> + + + + {agvDetail.currentLoad} + + + )} ); }; + export default MaterialAnimator; diff --git a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx index 70c3e9d..460997a 100644 --- a/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx +++ b/app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx @@ -199,7 +199,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai return ( <> {currentPath.length > 0 && ( - <> + {currentPath.map((point, index) => ( @@ -207,7 +207,7 @@ function VehicleAnimator({ path, handleCallBack, currentPhase, agvUuid, agvDetai ))} - + )} ); diff --git a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx index 5c92e66..d0e2afd 100644 --- a/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx +++ b/app/src/modules/simulation/vehicle/instances/instance/vehicleInstance.tsx @@ -9,8 +9,9 @@ import MaterialAnimator from '../animator/materialAnimator'; function VehicleInstance({ agvDetail }: any) { const { navMesh } = useNavMesh(); + const vehicleRef: any = useRef(); const { isPlaying } = usePlayButtonStore(); - const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad } = useVehicleStore(); + const { vehicles, setVehicleActive, setVehicleState, incrementVehicleLoad, setMaterialType } = useVehicleStore(); const [currentPhase, setCurrentPhase] = useState('stationed'); const [path, setPath] = useState<[number, number, number][]>([]); let isIncrememtable = useRef(true); @@ -45,8 +46,8 @@ function VehicleInstance({ agvDetail }: any) { const increment = () => { if (isIncrememtable.current) { - incrementVehicleLoad(agvDetail.modelUuid, 10); + setMaterialType(agvDetail.modelUuid, 'Material 1') isIncrememtable.current = false; } } @@ -72,7 +73,7 @@ function VehicleInstance({ agvDetail }: any) { }, 5000); - if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity) { + if (agvDetail.currentLoad === agvDetail.point.action.loadCapacity && agvDetail.materialType) { const toDrop = computePath( agvDetail.point.action.pickUpPoint.position, agvDetail.point.action.unLoadPoint.position @@ -119,6 +120,7 @@ function VehicleInstance({ agvDetail }: any) { setVehicleState(agvDetail.modelUuid, 'idle'); setVehicleActive(agvDetail.modelUuid, false); setPath([]); + setMaterialType(agvDetail.modelUuid, null) vehicleStatus(agvDetail.modelUuid, 'Reached pickup point again, cycle complete'); } }