Three.js: Animation issues with threejs, interpreted incorrectly

[hybridherbst]

Donkey-play-Violin.zip
Describe the bug

I exported an animation from one of our current projects but noticed that modelviewer/threejs have trouble with it; it seems that the animation is interpreted incorrectly. There are some warnings but I think they should not cause this behaviour, especially as it works fine in other viewers.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://gltf-viewer.donmccurdy.com/
2. Import the attached file
3. Go to https://sandbox.babylonjs.com/
4. Import the attached file
5. Note that Babylon exhibits the correct (desired) behaviour, same as Microsoft 3D Viewer.

Expected behavior

Correct animation playback.

(correct, Babylon sandbox)

Screenshots

(Incorrect, threejs)

Platform:

• Device: [Desktop, Mobile]
• OS: [Windows, MacOS, Linux, Android, iOS]
• Browser: [Chrome, Firefox, Safari, Edge]

EDIT: I believe this is because objects have different hierarchies but the same object names that are differently animated, and seems three doesn't take the object hierarchy into account when animating, only the object name?

[donmccurdy]

Hm, object naming shouldn't be the issue, in recent versions we append a suffix to object names to ensure they're unique for this reason. There are a few warnings printed by the glTF-Validator on this one:

The file's not invalid (the skinned mesh doesn't _have_ to be at the root of the scene) but viewers have to treat it as though it were, so it's often better and safer to put it there. I thought we handled these cases correctly either way, but it's possible something fails here.

[hybridherbst]

Thank you!

Two more thoughts,

• could it be that other viewers are "overachieving" in a sense and (despite the warning) correctly interpreting local transforms for skinned meshes? I tried an entire group of characters (placed next to each other, so with a moved skinned mesh each) and it worked fine in others while breaking threejs
• for this particular example, I'm pretty certain that the two skinned meshes (the donkey and the violin - I'm not sure why it was built that way) are placed at the same position, so the warning shouldn't really be relevant (they are separate skinned meshes but with no offset to each other)

[Mugen87]

@hybridherbst This issue seems to be fixed on dev. Please double-test this by drag'n'drop the asset into the editor:

https://raw.githack.com/mrdoob/three.js/dev/editor/index.html

You can start playing the animation from the sidebar (ANIMATIONS section).

[Mugen87]

It seems #20880 did the trick.

[hybridherbst]

@Mugen87 you could have at least given me a chance to try this out before closing 🙃

Can confirm it works for the attached model. I'll try a more complex one over the next days and open another issue if necessary.

[hybridherbst]

Complex example also seems to work :) Happy Holidays!