如何解决如何在反应三纤维中提取和播放动画
好吧,我有.gltf动画模型。我成功加载了模型,但无法播放嵌入式动画。我想知道是否可以通过任何方式解决它。顺便说一句,我正在对此作出反应。预先谢谢你。
在这里您可以找到模型 https://drive.google.com/file/d/1ZVyklaQuqKbSliu33hFxdyNpg4EQtcBH/view?usp=sharing
这是我尝试过的代码。
import * as THREE from 'three'
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls"
import React,{ Suspense,useRef,useEffect,useState } from 'react'
import { Canvas,extend,useThree,useFrame} from 'react-three-fiber'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
import './style.module.css'
extend({ OrbitControls })
function Hardware() {
const [scene,set] = useState()
useEffect(() => {
new GLTFLoader().load("tern_construct_animation.gltf",gltf => {
set(gltf.scene)
const mixer = new THREE.AnimationMixer(gltf.scene)
gltf.animations.forEach(clip => mixer.clipAction(clip).play())
})
},[])
return scene ? <primitive object={scene} /> : null
}
const Controls = () => {
const orbitRef = useRef()
const { camera,gl } = useThree()
useFrame(() => {
orbitRef.current.update()
})
return (
<orbitControls
autoRotate
maxPolarAngle={Math.PI / 3}
minPolarAngle={Math.PI / 3}
args={[camera,gl.domElement]}
ref={orbitRef}
/>
)
}
const animated_element = () => {
return (
<Canvas camera={{ position: [0,5] }}>
<ambientLight intensity={2} />
<pointLight position={[40,40,40]} />
<Controls/>
<Suspense fallback={null}>
<Hardware/>
</Suspense>
</Canvas>
)
}
export default animated_element;
解决方法
我一直在努力。
这是对我有用的代码。
很明显,此组件在树中的位置被Suspense
高处包裹。
import { useLoader,useFrame } from 'react-three-fiber';
import {
GLTFLoader
} from 'three/examples/jsm/loaders/GLTFLoader';
import * as THREE from 'three'
const Model = props => {
const model = useLoader(
GLTFLoader,props.path
)
// Here's the animation part
// *************************
let mixer
if (model.animations.length) {
mixer = new THREE.AnimationMixer(model.scene);
model.animations.forEach(clip => {
const action = mixer.clipAction(clip)
action.play();
});
}
useFrame((state,delta) => {
mixer?.update(delta)
})
// *************************
model.scene.traverse(child => {
if (child.isMesh) {
child.castShadow = true
child.receiveShadow = true
child.material.side = THREE.FrontSide
}
})
return (
<primitive
object={model.scene}
scale={props.scale}
/>
)
}
export default Model;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。