Reactjs 如何在react three fiber中提取和播放动画

嗯，我有。gltf动画模型。我成功加载了模型，但无法播放嵌入的动画。我想知道是否有人能解决这个问题。顺便说一句，我在react工作。先谢谢你

在这里你可以找到模型

这是我试过的代码

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;

import*作为“三”中的三个
从“three/examples/jsm/controls/OrbitControls”导入{OrbitControls}
从“React”导入React，{suspent，useRef，useffect，useState}
从'react three fiber'导入{Canvas，extend，UseTree，useFrame}
从'three/examples/jsm/loaders/GLTFLoader'导入{GLTFLoader}
导入“./style.module.css”
扩展（{OrbitControls}）
功能硬件（）{
const[scene，set]=useState（）
useffect（（）=>{
新建GLTFLoader（）.load（“tern\u construct\u animation.gltf”，gltf=>{
设置（gltf.scene）
const mixer=new THREE.AnimationMixer（gltf.scene）
gltf.animations.forEach（clip=>mixer.clipAction（clip.play（））
})
}, [])
返回场景？：空
}
常量控件=（）=>{
const orbitRef=useRef（）
const{camera，gl}=usetree（）
useFrame（（）=>{
orbitRef.current.update（）
})
返回(
)
}
常量动画元素=（）=>{
返回(
)
}
导出默认动画元素；

我也在为同样的问题挣扎

这是对我有用的代码

显然，该组件在树的较高位置用

悬念
包装

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”导入{useLoader，useFrame}；
导入{
GLTFLoader
}来自“三个/examples/jsm/loaders/GLTFLoader”；
将*从“三”导入为三
常量模型=道具=>{
const model=useLoader(
GLTFLoader，
道具路径
)
//这里是动画部分
// ************************* 
让混合器
if（model.animations.length）{
mixer=新的三个.AnimationMixer（model.scene）；
model.animations.forEach（剪辑=>{
const action=mixer.clipAction（clip）
动作。游戏（）；
});
}
useFrame（（状态，增量）=>{
混音器？更新（增量）
})
// *************************
model.scene.transverse（子项=>{
if（child.isMesh）{
child.castShadow=true
child.receiveShadow=true
child.material.side=3.FrontSide
}
})
返回(
)
}
导出默认模型；
如果执行console.log（gltf.animations）
，您会看到什么？里面有什么吗？是的，我有一个数组，里面有很多AnimationClip项目。在这里查看我发布的@MarquizzoThank，
useFrame（（state，delta）=>{mixer？.update（delta）}）
对我有用。我以前尝试使用
useFrame（（{clock}）=>mixer？update（clock.getDelta（））