three.jsblendergltf

GLB model appears deformed (crushed) in Three.js, but animations and skeleton load correctly


I'm working on a Three.js game using Electron, and I'm running into a strange issue when importing a GLB model exported from Blender. When I load my model in Three.js, the mesh appears crushed on itself as shown on the image while its skeleton (using SkeletonHelper) seems correct and is correctly animated.enter image description here

But when I load it with animations included, the mesh appears completely deformed, although the skeleton still loads properly and plays animations.

I checked:

I'm applying the animations to gltf.scene using AnimationMixer

Do you have any idea of ​​the origin of the problem?


Solution

  • After a lot of trial and error, I unintentionally fixed the issue by using SkeletonUtils.clone() to clone the loaded gltf.scene before adding it to my scene and applying animations.

    To be honest, I'm not entirely sure what the root cause was. My best guess is that there was some kind of mismatch or internal reference issue between the original SkinnedMesh and its Skeleton when applying animations directly to the unmodified gltf scene. Perhaps cloning with SkeletonUtils forces a proper rebinding of the mesh to the skeleton.

    If someone has a more technical explanation for why this happens, I'd love to hear it — but in the meantime, if anyone runs into a similar issue with animated GLB models looking crushed in Three.js: try SkeletonUtils.clone()! It solved it for me.