react-three-fiber中如何提取和播放动画 [英] How to extract and play animation in react-three-fiber
本文介绍了react-three-fiber中如何提取和播放动画的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
好吧,我有 .gltf 动画模型.我成功加载了模型,但无法播放嵌入的动画.我想知道是否有人可以解决它.顺便说一句,我正在对此做出反应.提前致谢.
Well I have .gltf animated model. I was successful in loading the model but wasn't able to play the embedded animation. I would like to know if in any way one can resolve it. Btw I am working this in react. Thank you in advance.
在这里你可以找到模型https://drive.google.com/file/d/1ZVyklaQuqKbSliu33hFxtdcHg/查看?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, 0, 5] }}>
<ambientLight intensity={2} />
<pointLight position={[40, 40, 40]} />
<Controls/>
<Suspense fallback={null}>
<Hardware/>
</Suspense>
</Canvas>
)
}
export default animated_element;
推荐答案
我也遇到了同样的问题.
I struggled with the same.
这是对我有用的代码.
显然这个组件在树中被Suspense
包裹.
Obviously this component is wrapped with Suspense
higher in the tree.
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;
这篇关于react-three-fiber中如何提取和播放动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文