Animation speed changes when second animation is added

Questions
,
1

Hi,
I’ve been working with the three.js animation mixer and I’ve come across a problem. I use the following 3D model (glTF-Sample-Models/2.0/Fox at master · KhronosGroup/glTF-Sample-Models · GitHub) which has three different animations (run, walk and survey). When I use this model in my own project, the first animation speed slows down when I start a second animation. So for example I start the walk animation and a few seconds later I start the survey animation, the walk animation slows down. I also tested this model in @donmccurdy gltf viewer (https://gltf-viewer.donmccurdy.com/) and here the same thing happens. Can someone explain to me why this happens and how to possibly fix this?

Thanks!

2

If both animations affect the same bones (which is common, unless your models are designed otherwise) then you cannot play them at the same time, or they will “average out” and give a weird look. More often you’ll want to fade from one animation to another, but not keep them both playing.

An alternative is additive animation, which requires preparing the animation data.

1 Like
3

Thanks for your response! Does the averaging out also happens when you have multiple translations in one mesh?

4

I’m not sure what you mean by that exactly, but two animations targeting the same mesh will overwrite each other in ways you often do not want, unless you are using additive animation.

1 Like
5

Another question, what does preparing the animation data mean? I opened for example the glb file of the model from this example in Blender: three.js examples
I don’t see any differences between de different animations, so how exactly should I prepare the animation data?

6

three.js has a utility (AnimationUtils.makeClipAdditive) to help with that. However, I don’t know if other preparation of the file and animation are required:

7

Allright, thanks!