import { useState, useMemo, useRef, useEffect } from 'react';
|
import { useFrame } from '@react-three/fiber';
|
import { useFBX, useAnimations } from '@react-three/drei';
|
import * as THREE from 'three';
|
import Box from './box';
|
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 getCorrectForkDis = (loaderAngle, forkDis) => {
|
|
}
|
|
const Agv = (props) => {
|
const { agvNo, position, trayList, hasBox } = props;
|
const theta = -props.theta;
|
const height = props.height * 0.04;
|
const forkLength = props.forkLength * 0.1;
|
const loaderTheta = Number(props.loaderTheta?.toFixed(1));
|
|
const [groupPos, setGroupPos] = useState({ x: 0, y: 0, z: 0 });
|
const [groupTheta, setGroupTheta] = useState(0);
|
const [loaderHeight, setLoaderHeight] = useState(0);
|
const [loaderAngle, setLoaderAngle] = useState(0);
|
const [forkDis, setForkDis] = useState(0);
|
const [realTrayList, setRealTrayList] = useState([]);
|
|
useEffect(() => {
|
if (!props || Object.keys(props).length === 0) {
|
return;
|
}
|
|
// group position
|
const pos = {
|
x: position?.[2] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_X,
|
y: position?.[1] * REAL_COMPARE_MAP_SCALE,
|
z: position?.[0] * REAL_COMPARE_MAP_SCALE + REAL_COMPARE_MAP_OFFSET_Z,
|
}
|
if (!Common.deepEqual(groupPos, pos) && props.position !== null) {
|
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 && props.theta !== null) {
|
const targetTheta = Common.normalizeAngle(theta - groupTheta) + groupTheta;
|
new TWEEN.Tween({ value: groupTheta })
|
.to({ value: targetTheta }, INTERVAL_TIME)
|
.easing(TWEEN.Easing.Linear.None)
|
.onUpdate((e) => {
|
setGroupTheta(e.value)
|
})
|
.onComplete((e) => {
|
setGroupTheta(e.value)
|
}).start();
|
}
|
|
// loader height
|
if (loaderHeight !== height && props.height !== null) {
|
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
|
const loaderAbsoluteAngle = (theta + loaderTheta) % 360;
|
if (loaderAngle !== loaderAbsoluteAngle && props.loaderTheta !== null) {
|
const targetTheta = Common.normalizeAngle(loaderAbsoluteAngle - loaderAngle) + loaderAngle;
|
console.log(targetTheta);
|
new TWEEN.Tween({ value: loaderAngle })
|
.to({ value: targetTheta }, INTERVAL_TIME)
|
.easing(TWEEN.Easing.Linear.None)
|
.onUpdate((e) => {
|
setLoaderAngle(e.value)
|
})
|
.onComplete((e) => {
|
setLoaderAngle(e.value)
|
}).start();
|
}
|
|
// fork lenght
|
// console.log("forkDis", forkDis);
|
// console.log("forkLength", forkLength);
|
if (forkDis !== forkLength && props.forkLength !== null) {
|
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();
|
}
|
|
if (trayList) {
|
setRealTrayList(trayList);
|
}
|
|
}, [props]);
|
|
useFrame((state, delta) => {
|
TWEEN.update();
|
})
|
|
const bodyModel = useMemo(() => {
|
const fbx = useFBX('/models/agv/body.fbx');
|
if (!fbx.castShadow) {
|
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) {
|
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) {
|
Common.setShadow(fbx);
|
}
|
fbx.scale.set(MODEL_AGV_SCALE, MODEL_AGV_SCALE, MODEL_AGV_SCALE);
|
return fbx.clone();
|
}, [])
|
|
return (
|
<>
|
<group
|
rotation-y={Common.rotationParseNum(groupTheta)}
|
position={[groupPos.x, groupPos.y, groupPos.z]}
|
>
|
<primitive object={bodyModel} castShadow />
|
<group
|
position-y={loaderHeight}
|
rotation-y={Common.rotationParseNum(loaderAngle)}
|
>
|
<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>
|
{realTrayList?.[0]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 25, 0]} />}
|
{realTrayList?.[1]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 48, 0]} />}
|
{realTrayList?.[2]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 71, 0]} />}
|
{realTrayList?.[3]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 94, 0]} />}
|
{realTrayList?.[4]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 117, 0]} />}
|
{realTrayList?.[5]?.hasBox && <Box rotationY={Math.PI / 2} position={[-43, 140, 0]} />}
|
</group>
|
</group>
|
</>
|
)
|
}
|
|
export default Agv;
|
