|  |  | 
 |  |  |     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; | 
 |  |  |         } | 
 |  |  |  | 
 |  |  |         // group position | 
 |  |  |         const pos = { | 
 |  |  |             x: position?.[0], | 
 |  |  | 
 |  |  |                 }).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 }) | 
 |  |  | 
 |  |  |                 }) | 
 |  |  |                 .onComplete((e) => { | 
 |  |  |                     setForkDis(e.value) | 
 |  |  |                     console.log(e.value); | 
 |  |  |                 }).start(); | 
 |  |  |         } | 
 |  |  |  | 
 |  |  | 
 |  |  |                 position={[groupPos.x, groupPos.y, groupPos.z]} | 
 |  |  |             > | 
 |  |  |                 <primitive object={bodyModel} castShadow /> | 
 |  |  |                 <group position-y={loaderHeight}> | 
 |  |  |                     <primitive object={loaderModel} castShadow position={[0, 30, 0]} /> | 
 |  |  |                 <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, 35, 0]} /> | 
 |  |  |                         {hasBox && <Box position={[0, 34, 0]} />} | 
 |  |  |                         <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> | 
 |  |  |         </> | 
 |  |  |     ) |