added steering for vehicle

app/src/modules/simulation/vehicle/instances/animator/vehicleAnimator.tsx

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

app/src/modules/simulation/vehicle/vehicles.tsx

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