Three.js не воспроизводит анимацию в React

Я загружаю модель GLTF, загруженную из Sketchfab, в приложение React. Модель загружается на отлично, а вот анимация не воспроизводится. Пробовал разные подходы. Любые идеи?

function Model({ url }) {

  const model = useRef()
  const { scene, animations } = useLoader(GLTFLoader, url)
  const [mixer] = useState(() => new THREE.AnimationMixer())
  useEffect(() => void mixer.clipAction(animations[0], group.current).play(), [])


  return(
        <primitive
          ref={model}
          object={scene}
        />
  )
}

gltf react-three-fiber three.js
person Good Guy    schedule 04.12.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Решение

  1. Мне пришлось использовать узел вместо сцены и выбрать RootNode (узел console.log и выбрать то, что мне показалось основным узлом, модель содержала дюжину узлов)
  2. Обновить микшер по кадрам с помощью useFrame
  3. Применить анимацию к модели (немного обновлено)

Рабочий код:


function Model({ url }) {

   const group = useRef()
  const { nodes, scene, materials, animations } = useLoader(GLTFLoader, url)
 const actions = useRef()
  const [mixer] = useState(() => new THREE.AnimationMixer())
  useFrame((state, delta) => mixer.update(delta))
  useEffect(() => {
    actions.current = { idle: mixer.clipAction(animations[0], group.current) }
    actions.current.idle.play()
    return () => animations.forEach((clip) => mixer.uncacheClip(clip))
  }, [])


  return(
     <group ref={group} dispose={null}>
        <primitive
          ref={group}
          name="Object_0"
          object={nodes["RootNode"]}
        />
        </group>
  )
}

Теперь это работает

person Good Guy    schedule 04.12.2020
comment
проверьте это twitter.com/0xca0a/status/1336056832025047041 - person hpalu; 08.12.2020

arrow_upward
0
arrow_downward

Вам нужно вызвать Mixer.update (delta) в useFrame внутри вашего компонента:

    import { useFrame } from 'react-three-fiber'
    function Model({url}) {
    .
    . 
    .
        useFrame((scene, delta) => {
            mixer?.update(delta)
        })
    .
    . 
    .
person Hayden Linder    schedule 03.01.2021