如何在threejs对象中播放动作，加载useGLTF并使用react 三纤维显示答案

【问题标题】：How to play actions in a threejs object, loaded with useGLTF and showed with react three fiber如何在threejs对象中播放动作，加载useGLTF并使用react 三纤维显示
【发布时间】：2022-02-02 00:37:04
【问题描述】：

我正在使用 useGLTF（反应三纤维）加载一个对象

我用反应三纤维来展示它

它显示正常，但我不知道如何为对象设置动画，它的动画是在我提供给 useGLTF 的文件中定义的

这里是代码沙箱：https://codesandbox.io/s/myoffice-3wpf4?file=/src/Components/MyOffice.js

这是 GitHub 中的项目：https://github.com/rafaelsoteldosilva/serenity

.glb 文件位于 public/studio.glb

如果你将它加载到 gltf 查看器 (https://gltf-viewer.donmccurdy.com/) 你可以看到动画在那里

此外，我还需要做什么才能让这些动画自动播放？

提前致谢

拉斐尔

【问题讨论】：

标签： reactjs three.js react-three-fiber

【解决方案1】：

创建模型后，我必须执行以下操作：

    const { scene, animations } = useGLTF('/studio.glb');
    let mixer = new THREE.AnimationMixer(scene);
    animations.forEach((clip) => {
        const action = mixer.clipAction(clip);
        action.play();
    });
    useFrame((state, delta) => {
        mixer.update(delta);
    });

它为对象设置了动画

拉斐尔

【讨论】：

【解决方案2】：

您还可以使用 Three Drei 库中的 useAnimation 挂钩。它使播放和加载动画更容易。

这是我正在播放动画的 3D 立方体。

import React, { useRef, useEffect } from "react";

import { useGLTF, useAnimations } from "@react-three/drei";

export default function Model({ ...props }) {
  const group = useRef();

  const { scene, animations } = useGLTF("/gltf/cubes.gltf", true);
  const { actions, mixer } = useAnimations(animations, group);
  useEffect(() => {
    actions.Animation.play();
  }, [mixer]);

  return <primitive ref={group} object={scene} dispose={null} />;
}

useGLTF.preload("/gltf/cubes.gltf");

确保创建一个钩子 useRef 来与加载的 3D 对象对话。我在渲染动画 .jsx 3D 对象时遇到了问题，它们看起来非常有问题。这就是我现在使用而不是 .jsx 对象的原因。

【讨论】：