How to transition smoothly between rootBone based animations

[nootnoot]

Hello all,

Being a Unity developer majorly I am a relatively new developer to Three.js. Being excited, I wanted to apply my newly learned skills to make a small web-based interactive similar to the game Stray. As always, the problem turned out to be more difficult than I had imagined. I was able to rig and export a cat model from Blender with NLA tracks as animations. I was making decent progress in terms of testing out basics, such as importing the model, setting up the animation mixer, and triggering the animations, until I hit the roadblock of smooth transitions between animation states.

In my case, the jump animation is divided into 3 phases, where the cat jumps from point A to point B. My challenge is to seamlessly crossfade between them while chaining them one after another.

Since the animations move the Root Bone’s position, the model jumped back to the model’s world transform position when trying to play the next animation. Upon beating my head, I found that Three.js doesn’t do Root Bone transform as other engines like Unity, hence I had to manually sync the model’s world transform to match the RootBone’s world position after animation end, which I later found out is also known as RootBone position extraction.

At this point, I thought I had solved the problem as I was able to play the next animation from the last frame of the previous animation without getting the model to jump positions.

Note: I set the Animation actions to LOOP ONCE and CLAMP at the end frame of each animation

This works, but still doesn’t solve the problem of smooth animation chaining, as was my initial plan.
Whenever I try to use functions like -

FadeIn/FadeOut/CrossFade the model seems to jump forward and come back to the desired world position. Since then, I have tried numerous settings and combinations without any luck. I also stumbled upon a similar post

Applying animated root bone transform to a mesh whilst blending animation out

Hi there TLDR: What would be the recommended way to blend out an animation which has a root transform that leaves it away from it’s starting position and orientation I am new here but have been using threeJs for a long time and have some finished projects with it. In my latest project I am having some difficulties that I have been unable to solve and need to ask for help from people who know more than me. I have a skinned mesh for which I have downloaded animations in Mixamo. Many of the Mi…

which is still unanswered. The only difference is that I am exporting my own model and animations as .glb from Blender

I am currently at a roadblock and unable to make any progress. It would be a disappointment if I cannot not finish the project from this point.

Any help is much appreciated.

[manthrax]

You may have to disable or overwrite the root bone of the skinnedmesh animation in your render function to control it yourself.
Or you can remove the individual animation tracks affecting it, and control the root bone programmatically.
threejs isn’t very opinionated about how animations work, and doesn’t have any concepts of “root bone/root motion” animations.. that has to be implemented by you.