From d41e1236ab68c9dce2e66e1f7ef1182c9424d17f Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期日, 05 五月 2024 16:11:32 +0800 Subject: [PATCH] # --- src/components/agv.jsx | 166 ++++++++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 132 insertions(+), 34 deletions(-) diff --git a/src/components/agv.jsx b/src/components/agv.jsx index 2f256ad..7b4e13f 100644 --- a/src/components/agv.jsx +++ b/src/components/agv.jsx @@ -3,67 +3,165 @@ import { useFBX, useAnimations } from '@react-three/drei'; import * as THREE from 'three'; import Box from './box'; - -const setShadow = (obj) => { - obj.castShadow = true; - obj.receiveShadow = true; - - if (obj.children) { - obj.children.forEach((child) => { - setShadow(child); - }); - } -}; - -const setColor = (obj) => { - if (obj.material) { - obj.material.color.set(0x4680BF); - } - if (obj.children) { - obj.children.forEach((child) => { - setColor(child); - }); - } -}; +import * as Common from '../utils/common'; +import * as TWEEN from "@tweenjs/tween.js"; +import { + INTERVAL_TIME, + MODEL_AGV_SCALE, + REAL_COMPARE_MAP_SCALE, + REAL_COMPARE_MAP_OFFSET_X, + REAL_COMPARE_MAP_OFFSET_Z, +} from '../config/setting' const Agv = (props) => { - const { } = props; + const { agvNo, 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; + } + + // group position + // const pos = { + // x: position?.[0], + // y: position?.[1], + // z: position?.[2], + // } + const pos = { + x: position?.[0] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_X, + y: position?.[1] * REAL_COMPARE_MAP_SCALE, + z: position?.[2] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_Z, + } + 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) => { + TWEEN.update(); + }) const bodyModel = useMemo(() => { const fbx = useFBX('/models/agv/body.fbx'); if (!fbx.castShadow) { - setShadow(fbx); + Common.setShadow(fbx); } + fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); return fbx.clone(); }, []) const loaderModel = useMemo(() => { const fbx = useFBX('/models/agv/loader.fbx'); if (!fbx.castShadow) { - setShadow(fbx); + Common.setShadow(fbx); } + fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); return fbx.clone(); }, []) const forkModel = useMemo(() => { const fbx = useFBX('/models/agv/fork.fbx'); if (!fbx.castShadow) { - setShadow(fbx); + Common.setShadow(fbx); } + fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE); return fbx.clone(); }, []) - useEffect(() => { - - }, []); - return ( <> - <group rotation={[0, 0, 0]} scale={0.5} position={[0, 0, 0]}> + <group + 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> </> ) -- Gitblit v1.9.1