From 51c03e5d6d3586d52603d76d76acdf13388883ab Mon Sep 17 00:00:00 2001 From: luxiaotao1123 <t1341870251@163.com> Date: 星期一, 22 四月 2024 15:19:25 +0800 Subject: [PATCH] # --- src/assets/data/agv.js | 0 public/models/agv/aa/SE-1.FBX | 0 src/components/box.jsx | 52 +++++++++++++++++ public/models/agv/aa/SE-2.FBX | 0 src/core/warehouse.jsx | 21 +++++-- public/models/agv/aa/SE-3.FBX | 0 src/components/agv.jsx | 91 ++++++++++++++++-------------- 7 files changed, 116 insertions(+), 48 deletions(-) diff --git a/public/models/agv/aa/SE-1.FBX b/public/models/agv/aa/SE-1.FBX new file mode 100644 index 0000000..32d9c48 --- /dev/null +++ b/public/models/agv/aa/SE-1.FBX Binary files differ diff --git a/public/models/agv/aa/SE-2.FBX b/public/models/agv/aa/SE-2.FBX new file mode 100644 index 0000000..4afb581 --- /dev/null +++ b/public/models/agv/aa/SE-2.FBX Binary files differ diff --git a/public/models/agv/aa/SE-3.FBX b/public/models/agv/aa/SE-3.FBX new file mode 100644 index 0000000..ff3e21d --- /dev/null +++ b/public/models/agv/aa/SE-3.FBX Binary files differ diff --git a/src/assets/data/agv.js b/src/assets/data/agv.js new file mode 100644 index 0000000..e69de29 --- /dev/null +++ b/src/assets/data/agv.js diff --git a/src/components/agv.jsx b/src/components/agv.jsx index b756443..2f256ad 100644 --- a/src/components/agv.jsx +++ b/src/components/agv.jsx @@ -1,62 +1,69 @@ -import { useRef, useEffect } from 'react'; +import { useState, useMemo, useRef, useEffect } from 'react'; import { useFrame } from '@react-three/fiber'; import { useFBX, useAnimations } from '@react-three/drei'; -import { AnimationMixer } from 'three'; +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); + }); + } +}; const Agv = (props) => { - const fbxRef = useRef(); - const mixerRef = useRef(); + const { } = props; - 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 bodyModel = useMemo(() => { + const fbx = useFBX('/models/agv/body.fbx'); + if (!fbx.castShadow) { + setShadow(fbx); } - }; + return fbx.clone(); + }, []) - const setColor = (obj) => { - if (obj.material) { - obj.material.color.set(0x4680BF); + const loaderModel = useMemo(() => { + const fbx = useFBX('/models/agv/loader.fbx'); + if (!fbx.castShadow) { + setShadow(fbx); } - if (obj.children) { - obj.children.forEach((child) => { - setColor(child); - }); - } - }; + return fbx.clone(); + }, []) - // setColor(fbx) - if (!fbx.castShadow) { - setShadow(fbx); - } + const forkModel = useMemo(() => { + const fbx = useFBX('/models/agv/fork.fbx'); + if (!fbx.castShadow) { + setShadow(fbx); + } + return fbx.clone(); + }, []) 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 /> + <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> </> ) diff --git a/src/components/box.jsx b/src/components/box.jsx new file mode 100644 index 0000000..5ca3bba --- /dev/null +++ b/src/components/box.jsx @@ -0,0 +1,52 @@ +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'; + +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); + }); + } +}; + +const Box = (props) => { + const { position = [0, 300, 0] } = props; + + const boxModel = useMemo(() => { + const fbx = useFBX('/models/box/box.fbx'); + if (!fbx.castShadow) { + setShadow(fbx); + } + return fbx.clone(); + }, []) + + useEffect(() => { + + }, []); + + return ( + <> + <group rotation={[0, 0, 0]} scale={0.5} position={position}> + <primitive object={boxModel} castShadow /> + </group> + </> + ) +} + +export default Box; \ No newline at end of file diff --git a/src/core/warehouse.jsx b/src/core/warehouse.jsx index d7a2d0a..b65db59 100644 --- a/src/core/warehouse.jsx +++ b/src/core/warehouse.jsx @@ -2,34 +2,43 @@ import { useFrame } from '@react-three/fiber'; import * as THREE from 'three'; import Agv from '../components/agv'; +import Box from '../components/box'; import tunnelData from '../assets/data/tunnel'; import Tunnel from '../components/tunnel'; const Warehouse = (props) => { - const [agvData, setAgvData] = useState([]); + const [agvData, setAgvData] = useState([ + {} + ]); + + const [boxData, setBoxData] = useState([ + {} + ]) useEffect(() => { }, []) - const agvEl = agvData.map((data, idx) => <Agv key={idx} {...data} />) - const tunnelEl = useMemo(() => { return tunnelData.map((tunnel, index) => <Tunnel key={index} {...tunnel} />) }, []); + const agvEl = agvData.map((data, idx) => <Agv key={idx} {...data} />) + + const boxEl = boxData.map((data, idx) => <Box key={idx} {...data} />) + useFrame((state, delta) => { - - // setAgvData(); + // setBoxData(); }) return ( <> <group> - {agvEl} {tunnelEl} + {agvEl} + {boxEl} </group> </> ) -- Gitblit v1.9.1