如何在 React Three Fiber 中执行就地动画

Question

我从 Mixamo 导入了一个带有一些动画的 3D 模型，想知道如何执行动画？我从 npx gltfjsx 创建的 GLTF 文件：


  const { nodes, materials, animations } = useGLTF("/Mannequin.glb");
  const { actions } = useAnimations(animations, heroRef);

  return (
    <>
      <group ref={heroRef} dispose={null}>
        <group rotation={[Math.PI / 2, 0, 0]} scale={0.01}>
          <primitive object={nodes.mixamorig1Hips} />
          <skinnedMesh
            geometry={nodes.Ch36.geometry}
            material={materials.Ch36_Body}
            skeleton={nodes.Ch36.skeleton}
          />
        </group>

        {/* <gridHelper args={[25, 25]}/> */}
      </group>
    </>
  );
}

useGLTF.preload("/Mannequin.glb");

例如，我希望模型在不改变位置的情况下执行运行动画（运行ning 在现场），这样如果我可以执行平移模型的用户控件并使用动画循环，看起来它们实际上是运行ning。

有没有办法做到这一点？我已经搜索过，但找不到任何东西。

Answer 1

    useEffect(() => {
    console.log(actions) // find out the name of your action
    actions.someAction.play()
    });

这将使动画播放到位，如果它是从 mixamo 中导出的，则有一个设置。

然后你可以在你的网格周围放置一个并让它根据你的控制移动

如何在 React Three Fiber 中执行就地动画

How to Perform Inplace Animations in React Three Fiber

3d

animation

game-development

three.js

react-three-fiber