|  |  | 
 |  |  | import Box from './box'; | 
 |  |  | import * as Common from '../utils/common'; | 
 |  |  | import * as TWEEN from "@tweenjs/tween.js"; | 
 |  |  | import { INTERVAL_TIME } from '@/config/setting' | 
 |  |  | import { INTERVAL_TIME, MODEL_AGV_SCALE } from '@/config/setting' | 
 |  |  |  | 
 |  |  | const Agv = (props) => { | 
 |  |  |     const { position, theta } = props; | 
 |  |  |     const { position, theta, height, loaderTheta, forkLength, trayList, hasBox } = props; | 
 |  |  |  | 
 |  |  |     const [groupPos, setGroupPos] = useState({ x: 0, y: 0, z: 0 }); | 
 |  |  |     const [groupTheta, setGroupTheta] = useState(0); | 
 |  |  |     const [loaderHeight, setLoaderHeight] = useState(0); | 
 |  |  |     const [integrateTheta, setIntegrateTheta] = useState(0); | 
 |  |  |     const [forkDis, setForkDis] = useState(0); | 
 |  |  |  | 
 |  |  |     useEffect(() => { | 
 |  |  |         if (!props || Object.keys(props).length === 0) { | 
 |  |  |             return; | 
 |  |  |         } | 
 |  |  |         new TWEEN.Tween(groupPos) | 
 |  |  |             .to({ | 
 |  |  |                 x: position[0], | 
 |  |  |                 y: position[1], | 
 |  |  |                 z: position[2] | 
 |  |  |             }, INTERVAL_TIME) | 
 |  |  |             .easing(TWEEN.Easing.Linear.None) | 
 |  |  |             .onUpdate((e) => { | 
 |  |  |                 setGroupPos({ ...e }); | 
 |  |  |             }) | 
 |  |  |             .start(); | 
 |  |  |  | 
 |  |  |         // group position | 
 |  |  |         const pos = { | 
 |  |  |             x: position?.[0], | 
 |  |  |             y: position?.[1], | 
 |  |  |             z: position?.[2], | 
 |  |  |         } | 
 |  |  |         if (!Common.deepEqual(groupPos, pos)) { | 
 |  |  |             new TWEEN.Tween(groupPos) | 
 |  |  |                 .to(pos, INTERVAL_TIME) | 
 |  |  |                 .easing(TWEEN.Easing.Linear.None) | 
 |  |  |                 .onUpdate((e) => { | 
 |  |  |                     setGroupPos({ ...e }); | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setGroupPos({ ...e }); | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // group theta | 
 |  |  |         if (groupTheta !== theta) { | 
 |  |  |             const minTheta = Common.minDiffTheta(groupTheta, theta); | 
 |  |  |             new TWEEN.Tween({ value: groupTheta }) | 
 |  |  |                 .to({ value: minTheta }, INTERVAL_TIME) | 
 |  |  |                 .easing(TWEEN.Easing.Linear.None) | 
 |  |  |                 .onUpdate((e) => { | 
 |  |  |                     setGroupTheta(e.value) | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setGroupTheta(e.value) | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // loader height | 
 |  |  |         if (loaderHeight !== height) { | 
 |  |  |             new TWEEN.Tween({ value: loaderHeight }) | 
 |  |  |                 .to({ value: height }, INTERVAL_TIME) | 
 |  |  |                 .easing(TWEEN.Easing.Linear.None) | 
 |  |  |                 .onUpdate((e) => { | 
 |  |  |                     setLoaderHeight(e.value) | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setLoaderHeight(e.value) | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // loader theta | 
 |  |  |         if (integrateTheta !== loaderTheta) { | 
 |  |  |             const minTheta = Common.minDiffTheta(integrateTheta, loaderTheta); | 
 |  |  |             new TWEEN.Tween({ value: integrateTheta }) | 
 |  |  |                 .to({ value: minTheta }, INTERVAL_TIME) | 
 |  |  |                 .easing(TWEEN.Easing.Linear.None) | 
 |  |  |                 .onUpdate((e) => { | 
 |  |  |                     setIntegrateTheta(e.value) | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setIntegrateTheta(e.value) | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // fork lenght | 
 |  |  |         if (forkDis !== forkLength) { | 
 |  |  |             new TWEEN.Tween({ value: forkDis }) | 
 |  |  |                 .to({ value: forkLength }, INTERVAL_TIME) | 
 |  |  |                 .easing(TWEEN.Easing.Linear.None) | 
 |  |  |                 .onUpdate((e) => { | 
 |  |  |                     setForkDis(e.value) | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setForkDis(e.value) | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |     }, [props]); | 
 |  |  |  | 
 |  |  |     useFrame((state, delta) => { | 
 |  |  | 
 |  |  |         if (!fbx.castShadow) { | 
 |  |  |             Common.setShadow(fbx); | 
 |  |  |         } | 
 |  |  |         fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); | 
 |  |  |         return fbx.clone(); | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  | 
 |  |  |         if (!fbx.castShadow) { | 
 |  |  |             Common.setShadow(fbx); | 
 |  |  |         } | 
 |  |  |         fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); | 
 |  |  |         return fbx.clone(); | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  | 
 |  |  |         if (!fbx.castShadow) { | 
 |  |  |             Common.setShadow(fbx); | 
 |  |  |         } | 
 |  |  |         fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); | 
 |  |  |         return fbx.clone(); | 
 |  |  |     }, []) | 
 |  |  |  | 
 |  |  |     return ( | 
 |  |  |         <> | 
 |  |  |             <group | 
 |  |  |                 rotation-y={Common.rotationParseNum(theta)} | 
 |  |  |                 scale={0.5} | 
 |  |  |                 rotation-y={Common.rotationParseNum(groupTheta)} | 
 |  |  |                 position={[groupPos.x, groupPos.y, groupPos.z]} | 
 |  |  |             > | 
 |  |  |                 <primitive object={bodyModel} castShadow /> | 
 |  |  |                 <primitive object={loaderModel} castShadow position={[0, 100, 0]} /> | 
 |  |  |                 <primitive object={forkModel} castShadow position={[0, 120, 0]} /> | 
 |  |  |                 <Box position={[100, 100, 300]} /> | 
 |  |  |                 <group | 
 |  |  |                     position-y={loaderHeight} | 
 |  |  |                     rotation-y={Common.rotationParseNum(integrateTheta)} | 
 |  |  |                 > | 
 |  |  |                     <primitive object={loaderModel} castShadow position={[0, 20, 0]} /> | 
 |  |  |                     <group position-z={forkDis}> | 
 |  |  |                         <primitive object={forkModel} castShadow position={[0, 25, 0]} /> | 
 |  |  |                         {hasBox && <Box position={[0, 24, 0]} />} | 
 |  |  |                     </group> | 
 |  |  |                 </group> | 
 |  |  |                 <group> | 
 |  |  |                     {trayList?.[0]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 25, 0]} />} | 
 |  |  |                     {trayList?.[1]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 48, 0]} />} | 
 |  |  |                     {trayList?.[2]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 71, 0]} />} | 
 |  |  |                     {trayList?.[3]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 94, 0]} />} | 
 |  |  |                     {trayList?.[4]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 117, 0]} />} | 
 |  |  |                     {trayList?.[5]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 140, 0]} />} | 
 |  |  |                 </group> | 
 |  |  |             </group> | 
 |  |  |         </> | 
 |  |  |     ) |