How to Perform Inplace Animations in React Three Fiber

Question

I imported a 3D model from Mixamo with some animations and was wondering how to perform does animations in place? The GLTF file I created from npx gltfjsx:

  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");

For example, I would like the model to perform the run animation without changing locations (running on the spot) so that if I can perform user controls that translate the model and with the animation looping, it would look like they were actually running.

Are there any ways to do this? I have searched and could not find anything.

Answer 1

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

This will make the animation play in place, if it was exported like that from mixamo, there is a setting.

Then you can put a around your mesh and make it move based on your control