import { useState, useEffect, useRef, useMemo } from 'react';
|
import { useFrame } from '@react-three/fiber';
|
import * as THREE from 'three';
|
import Tunnel from '../components/tunnel';
|
import Shelf from '../components/shelf';
|
import Box from '../components/box';
|
import Agv from '../components/agv';
|
|
import tunnelData from '@/assets/data/tunnel';
|
import shelfData from '@/assets/data/shelf';
|
import agvRealDataList from '@/assets/data/agv';
|
import { INTERVAL_TIME } from '@/config/setting'
|
|
let index = 0;
|
|
const Warehouse = (props) => {
|
|
const [agvData, setAgvData] = useState([
|
{}
|
,
|
{}
|
]);
|
const [boxData, setBoxData] = useState([
|
{}
|
])
|
|
useEffect(() => {
|
const timer = setInterval(() => {
|
const agvRealData = agvRealDataList[index];
|
if (agvRealData) {
|
setAgvData(agvRealData);
|
}
|
index++;
|
}, INTERVAL_TIME * 1.1);
|
|
return () => {
|
clearInterval(timer);
|
}
|
}, [])
|
|
const tunnelEl = useMemo(() => {
|
return tunnelData.map((data, index) => <Tunnel key={index} {...data} />)
|
}, []);
|
|
const shelfEl = useMemo(() => {
|
return shelfData.map((data, index) => <Shelf key={index} {...data} />)
|
}, []);
|
|
const agvEl = useMemo(() => {
|
return agvData.map((data, idx) => <Agv key={idx} {...data} />)
|
}, [agvData]);
|
|
const boxEl = useMemo(() => {
|
return boxData.map((data, idx) => <Box key={idx} {...data} />)
|
}, [boxData]);
|
|
useFrame((state, delta) => {
|
|
})
|
|
return (
|
<>
|
<group>
|
{tunnelEl}
|
{shelfEl}
|
{agvEl}
|
{boxEl}
|
</group>
|
</>
|
)
|
}
|
|
export default Warehouse;
|