| | |
| | | import * as TWEEN from "@tweenjs/tween.js"; |
| | | import { INTERVAL_TIME } from '@/config/setting' |
| | | |
| | | let lastData = {}; |
| | | |
| | | // TWEEN.Easing.Linear.None 匀速动画 |
| | | // TWEEN.Easing.Quadratic.InOut 在动画的开始和结束阶段,速度较慢,而在中间阶段速度较快 |
| | | const TWEEN_EASING = TWEEN.Easing.Linear.None; |
| | | let coords = { x: 0, y: 0, z: 0 }; |
| | | |
| | | const Agv = (props) => { |
| | | const { position, theta } = props; |
| | | |
| | | const [groupPos, setGroupPos] = useState({ x: 0, y: 0, z: 0 }); |
| | | const coords = useRef({ x: 0, y: 0, z: 0 }); |
| | | |
| | | useEffect(() => { |
| | | if (!props || Object.keys(props).length === 0) { |
| | | return; |
| | | } |
| | | console.log(props); |
| | | const pos = { |
| | | x: props.position[0], |
| | | y: 0, |
| | | z: props.position[2], |
| | | } |
| | | new TWEEN.Tween(coords.current) |
| | | .to(pos, INTERVAL_TIME) |
| | | .easing(TWEEN_EASING) |
| | | .onUpdate((e) => { |
| | | console.log(e); |
| | | }) |
| | | .start(); |
| | | // new TWEEN.Tween(coords) |
| | | // .to(pos, INTERVAL_TIME) |
| | | // .easing(TWEEN.Easing.Linear.None) |
| | | // .onUpdate((e) => { |
| | | // coords = e; |
| | | // console.log(e); |
| | | // }) |
| | | // .start(); |
| | | }, [props]); |
| | | |
| | | useFrame((state, delta) => { |
| | |
| | | }, []) |
| | | |
| | | useEffect(() => { |
| | | |
| | | |
| | | }, []); |
| | | |
| | | return ( |
| | |
| | | <group |
| | | rotation-y={Common.rotationParseNum(theta)} |
| | | scale={0.5} |
| | | position={[coords.current.x, coords.current.y, coords.current.z]} |
| | | position={position} |
| | | > |
| | | <primitive object={bodyModel} castShadow /> |
| | | <primitive object={loaderModel} castShadow position={[0, 100, 0]} /> |
| | |
| | | import { INTERVAL_TIME } from '@/config/setting' |
| | | |
| | | let index = 0; |
| | | let coords = { x: 0, y: 0, z: 0 }; |
| | | |
| | | const Warehouse = (props) => { |
| | | |
| | | const [agvData, setAgvData] = useState([ |
| | | {} |
| | | ]); |
| | | |
| | | const [boxData, setBoxData] = useState([ |
| | | {} |
| | | ]) |
| | | |
| | | useEffect(() => { |
| | | const agvRealData = agvRealDataList[0]; |
| | | |
| | | const timer = setInterval(() => { |
| | | const agvRealData = agvRealDataList[index]; |
| | | if (agvRealData) { |
| | | setAgvData((state) => { |
| | | return agvRealData; |
| | | }); |
| | | } |
| | | coords.x++; |
| | | agvRealData[0].position = [coords.x, coords.y, coords.z]; |
| | | // console.log(agvRealData); |
| | | setAgvData(agvRealData); |
| | | index++; |
| | | }, INTERVAL_TIME); |
| | | }, 1000); |
| | | |
| | | return () => { |
| | | clearInterval(timer); |
| | | } |
| | | }, []) |
| | | |
| | | useEffect(() => { |
| | | console.log(agvData); |
| | | }, [agvData]) |
| | | |
| | | const tunnelEl = useMemo(() => { |
| | | return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />) |
| | | }, []); |