| | |
| | | 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'; |
| | | import * as Common from '../utils/common' |
| | | |
| | | let lastData = {}; |
| | | |
| | | 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); |
| | | } |
| | | const { position, theta } = props; |
| | | |
| | | useEffect(() => { |
| | | mixerRef.current = new AnimationMixer(fbx); |
| | | console.log(position); |
| | | console.log(theta); |
| | | |
| | | if (fbx.animations.length > 0) { |
| | | useFrame((state, delta) => { |
| | | mixerRef?.current?.update(delta); |
| | | }); |
| | | }, [props]); |
| | | |
| | | const action = mixerRef.current.clipAction(fbx.animations[0]); // 假设只有一个动画,可以根据实际情况修改 |
| | | action.play(); |
| | | const bodyModel = useMemo(() => { |
| | | const fbx = useFBX('/models/agv/body.fbx'); |
| | | if (!fbx.castShadow) { |
| | | Common.setShadow(fbx); |
| | | } |
| | | return fbx.clone(); |
| | | }, []) |
| | | |
| | | return () => { |
| | | mixerRef.current.stopAllAction(); |
| | | }; |
| | | const loaderModel = useMemo(() => { |
| | | const fbx = useFBX('/models/agv/loader.fbx'); |
| | | if (!fbx.castShadow) { |
| | | Common.setShadow(fbx); |
| | | } |
| | | return fbx.clone(); |
| | | }, []) |
| | | |
| | | const forkModel = useMemo(() => { |
| | | const fbx = useFBX('/models/agv/fork.fbx'); |
| | | if (!fbx.castShadow) { |
| | | Common.setShadow(fbx); |
| | | } |
| | | return fbx.clone(); |
| | | }, []) |
| | | |
| | | useEffect(() => { |
| | | }, []); |
| | | |
| | | return ( |
| | | <> |
| | | <group rotation={[0, 0, 0]} scale={0.5} position={[0, 0, 0]}> |
| | | <primitive object={fbx} castShadow /> |
| | | <group rotation-y={Common.rotationParseNum(theta)} scale={0.5} position={position}> |
| | | <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> |
| | | </> |
| | | ) |