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. ThreeJS Editor Screenshot all working fine
4 meshes however fail to work in the R3F imported glb. R3F Screenshot without Head and Eye Meshes
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 GLTF Export Settings Screenshot
Update 2024-02-13 I am using a workaround atm, which works but doesn't give me the versatility of the GLFT deconstruct. Using a 'primitive' instead works for the moment.