Issue importing Animations into R3F from ReadyPlayerMe via GLB

Questions
1

I exported a character from readyplayer.me as glb, which works fine in R3F.

I imported the model into Blender and transformed it into a FBX for mixamo.

After I selected the animations I liked I managed to export the model nicely with animations and it runs in the threejs Editor.

bug_avatar-fine
bug_avatar-fine615Ă—673 54.1 KB

4 meshes however fail to work in the R3F imported glb.
bug_avatar-fine-without-head-and-eyes

import { useAnimations, useGLTF } from '@react-three/drei'
import { useControls } from 'leva'
import React, { useEffect, useRef } from 'react'

export function AvatarWinter(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/models/avatar-winter.glb')
  const { actions } = useAnimations(animations, group)
  const { animation } = useControls("ANIMATION", {
    animation: {
      value: "Idle",
      options: Object.keys(actions)
    }
  })

  useEffect(() => {
    actions[animation].reset().fadeIn(0.5).play()
    return () => actions[animation].fadeOut(0.5)
  }, [animation])
  console.log(actions)
  return (
    <group ref={group} {...props} dispose={null}>
      <group name="Scene">
        <group name="Idle">
          <primitive object={nodes.Hips} />
          <skinnedMesh name="Wolf3D_Body" geometry={nodes.Wolf3D_Body.geometry} material={materials.Wolf3D_Body} skeleton={nodes.Wolf3D_Body.skeleton} />
          <skinnedMesh name="Wolf3D_Glasses" geometry={nodes.Wolf3D_Glasses.geometry} material={materials.Wolf3D_Glasses} skeleton={nodes.Wolf3D_Glasses.skeleton} />
          <skinnedMesh name="Wolf3D_Outfit_Bottom" geometry={nodes.Wolf3D_Outfit_Bottom.geometry} material={materials.Wolf3D_Outfit_Bottom} skeleton={nodes.Wolf3D_Outfit_Bottom.skeleton} />
          <skinnedMesh name="Wolf3D_Outfit_Footwear" geometry={nodes.Wolf3D_Outfit_Footwear.geometry} material={materials.Wolf3D_Outfit_Footwear} skeleton={nodes.Wolf3D_Outfit_Footwear.skeleton} />
          <skinnedMesh name="Wolf3D_Outfit_Top" geometry={nodes.Wolf3D_Outfit_Top.geometry} material={materials.Wolf3D_Outfit_Top} skeleton={nodes.Wolf3D_Outfit_Top.skeleton} />

          <skinnedMesh name="EyeLeft"
            geometry={nodes.EyeLeft.geometry}
            material={materials.Wolf3D_Eye}
            skeleton={nodes.EyeLeft.skeleton}
          />
          <skinnedMesh name="EyeRight"
            geometry={nodes.EyeRight.geometry}
            material={materials.Wolf3D_Eye}
            skeleton={nodes.EyeRight.skeleton}
          />
          <skinnedMesh name="Wolf3D_Head"
            geometry={nodes.Wolf3D_Head.geometry}
            material={materials.Wolf3D_Skin}
            skeleton={nodes.Wolf3D_Head.skeleton}
          />
          <skinnedMesh name="Wolf3D_Teeth"
            geometry={nodes.Wolf3D_Teeth.geometry}
            material={materials.Wolf3D_Teeth}
            skeleton={nodes.Wolf3D_Teeth.skeleton}
          />
        </group>
      </group>
    </group>
  )
}

useGLTF.preload('/models/avatar-winter.glb')

The skeleton on meshes error message is the following:

Uncaught TypeError: Cannot read properties of undefined (reading 'length')
    at Object.update (three.module.js:17674:42)
    at setProgram (three.module.js:29744:18)
    at WebGLRenderer.renderBufferDirect (three.module.js:28645:20)
    at renderObject (three.module.js:29344:11)
    at renderObjects (three.module.js:29313:6)
    at renderScene (three.module.js:29182:36)
    at WebGLRenderer.render (three.module.js:28987:5)
    at Object.current (ContactShadows.js:84:10)
    at render$1 (index-5bde93f1.esm.js:1526:22)
    at loop (index-5bde93f1.esm.js:1553:19)

relating to the following line in threejs:

let morphInfluencesSum = 0;

			for ( let i = 0; i < objectInfluences.length; i ++ ) {

				morphInfluencesSum += objectInfluences[ i ];

			}

Perhapse somebody got a pointer to what I have to change in my blender export? Thanks

blender
blender744Ă—953 62.7 KB

2

i don’t see any obvious mistakes, unless there’s no actions called “Idle” which is the first you run.

  • try it in some online gltf viewer and see if that can play the animations under the same names
  • try <primitive object={scene} /> instead of the jsx just to see if it’s that

a codesandbox would also help

1 Like