I recently tried my hand at creating avatars and animations using readyplay.me and mixamo. For those interested, you can check out the tutorial I followed here: https://dev.to/nourdinedev/how-to-use-threejs-and-react-to-render-a-3d-model-of-your-self-4kkf
Sharing my App.js code below – while I successfully managed to create an avatar that works in JavaScript, I encountered an error when trying to replace model.glb with model_animation.glb. Any insights on what might be causing this error would be greatly appreciated!
/*
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')