Uncaught TypeError: Cannot read properties of undefined (reading 'play')

Question

I am trying to create avatar and animations thru readyplay.me and mixamo. Here is the link where I learned it: https://dev.to/nourdinedev/how-to-use-threejs-and-react-to-render-a-3d-model-of-your-self-4kkf

The code below is my App.js. I am able to pass thru the first part which is have the avatar created and worked in javascript. However, I got an error as in tittle after I replace model.glb with model_animation.glb. Can someone please advise what caused the error?

/*
Auto-generated by: https://github.com/pmndrs/gltfjsx
*/

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

export default function Model({ ...props }) {
  const group = useRef();
  const { nodes, materials, animations } = useGLTF(
    "/model_animation.glb"
  );
  const { actions } = useAnimations(animations, group);
  useEffect(() => {
    actions["Armature|mixamo.com|Layer0"].play();
  });
  return (
    <group ref={group} {...props} dispose={null}>
    <group name="Armature001"></group>
      <primitive object={nodes.Hips} />
      <skinnedMesh name="Wolf3D_Avatar001" geometry={nodes.Wolf3D_Avatar001.geometry} material={materials['Wolf3D_Avatar.001']} skeleton={nodes.Wolf3D_Avatar001.skeleton} morphTargetDictionary={nodes.Wolf3D_Avatar001.morphTargetDictionary} morphTargetInfluences={nodes.Wolf3D_Avatar001.morphTargetInfluences} />
    </group>
  )
}

useGLTF.preload('/model_animation.glb')

Answer 1

You have to changed the model file name to match the import in your code.