Animation group blending with glb file

@vx9, I reworked the scene a bit to make it easier to manage clips and how they loop or path to the next animation. You can see in the reworked playground that I revised the changeAnimation function. Some of the issue you were running into were that the variable you declared named “done” was undefined, and was causing some issues when testing the value.

You also are adding an observable every time you click the button. The observable list was growing with each click. Using addOnce takes care of this since you want to abstract the call to play a new animation without bloating the observable list. Using addOnce will add the observable and once it gets used, it is removed from the list.

Some of the issues you were having stemmed from managing clips that had different needs for looping and for pathing to another animation. To help organize this data and remove some of the management of the changeAnimation function from managing what clips have what parameters, I set up objects for each animation. This helps you by keeping all the pertinent parameters for each animation clip together in one place. The object holds the animation group to play, the value for loop, and the next animation - if any - to play. Additionally, the next animation parameter holds an array of objects so you could randomly choose between different idle animations for example. And if the next animation array is empty, it will not add the observable and will just continue to loop.

Lastly, calling the changeAnimation function again in the onAnimationEndObservable rather than using group.play() allows more flexibility as you can then path many animations in sequence. Since the group that is playing has it’s own information about the next group to play, each one can path to a new group meaning it will work for a sequence of any size.

I hope this helps unblock you, but ping back with any additional questions.

5 Likes