public/models/agv/body.fbx | 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/models/agv/fork.fbx | 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/models/agv/loader.fbx | 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/models/box/box.fbx | 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/models/conveyor/conveyor.fbx | 补丁 | 查看 | 原始文档 | blame | 历史 | |
public/models/shlef/row.glb | 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/components/agv.jsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/core/warehouse.jsx | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
public/models/agv/body.fbxBinary files differ
public/models/agv/fork.fbxBinary files differ
public/models/agv/loader.fbxBinary files differ
public/models/box/box.fbxBinary files differ
public/models/conveyor/conveyor.fbxBinary files differ
public/models/shlef/row.glbBinary files differ
src/components/agv.jsx
New file @@ -0,0 +1,65 @@ import { useRef, useEffect } from 'react'; import { useFrame } from '@react-three/fiber'; import { useFBX, useAnimations } from '@react-three/drei'; import { AnimationMixer } from 'three'; const Agv = (props) => { const fbxRef = useRef(); const mixerRef = useRef(); const fbx = useFBX('/models/agv/body.fbx'); 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); }); } }; // setColor(fbx) if (!fbx.castShadow) { setShadow(fbx); } useEffect(() => { mixerRef.current = new AnimationMixer(fbx); if (fbx.animations.length > 0) { useFrame((state, delta) => { mixerRef?.current?.update(delta); }); const action = mixerRef.current.clipAction(fbx.animations[0]); // 假设只有一个动画,可以根据实际情况修改 action.play(); } return () => { mixerRef.current.stopAllAction(); }; }, []); return ( <> <group rotation={[0, 0, 0]} scale={0.5} position={[0, 0, 0]}> <primitive object={fbx} castShadow /> </group> </> ) } export default Agv; src/core/warehouse.jsx
@@ -1,14 +1,23 @@ import { useEffect, useRef, useMemo } from 'react'; import Agv from '../components/agv'; const Warehouse = (props) => { useEffect(() => { }, []) const agvEl = useMemo(() => { return ( <Agv /> ) }, []); return ( <> <group> {agvEl} </group> </> ) }