Playing list of animation at once

Questions
1

After searching for a long time i couldn’t find any example or doc or anything that contains how to play a list of animation sequentially ? Is there anyway?

if so can please share some resources that are related?

2

This example uses different animations in a List.

https://threejs.org/examples/#webgl_animation_multiple

const mixer1 = new THREE.AnimationMixer( model1 );
					const mixer2 = new THREE.AnimationMixer( model2 );
					const mixer3 = new THREE.AnimationMixer( model3 );

					mixer1.clipAction( gltf.animations[ 0 ] ).play(); // idle
					mixer2.clipAction( gltf.animations[ 1 ] ).play(); // run
					mixer3.clipAction( gltf.animations[ 3 ] ).play(); // walk
1 Like
3

Thanks. But I was looking for playing a list of character animations at once within one mixer.

4 
var amountofanimations = 5; // How many animations do you have - default 5
var animationtime = 10; // How long one animations should play - default 10 seconds

const mixer = new THREE.AnimationMixer( model );

for (var i = 0; i <= amountofanimations; i++)
{
    mixer.clipAction( gltf.animations[ i ] ).play(); // play the animation i (0, 1, 2, 3 .....)
    await new Promise(resolve => setTimeout(resolve, animationtime * 1000)); // WAIT animationtime * 1000 for seconds

    //Loop
}
1 Like
5

From the docs:

The AnimationMixer is a player for animations on a particular object in the scene. When multiple objects in the scene are animated independently, one AnimationMixer may be used for each object.

So if you have multiple characters playing different animations, you need on mixer for each character.

On the other hand, if the characters all play the same animation exactly in sync with each other, AnimationObjectGroup might work.

6

When exporting multiple actions in Blender as one single AnimationClip with the GLTF exporter and import it in threeJs we only need one mixer to play it, also when multiple objects are animated. So no need to use an AnimationObjectGroup for that.

I believe the TS was asking to play animations in a sequence, so after eachother, at once so it looks like a misunderstanding.

Better to use requestAnimationFrame instead of setTimeout. setTimeout isn’t adviced and has a lot of cons. For one it’s continuing when a browsertab isn’t active.

I also wonder if it’s needed to keep track of the timing ourselves. This way it’s difficult to keep things seemless.

I didn’t use events on the Animation system yet, but when looking in the docs there’s a finished event on the mixer which looks like is sending the action with the event. Events are way more reliable then to keep track of a shadow timer. Especially to stay in sync when framerates drop.

mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction

https://threejs.org/docs/#api/en/animation/AnimationAction

3 Likes
7

Oops you’re right. In that case, yes, the finished event is probably the correct approach.

1 Like
8

Yer you are right…i didn’t thought about that one animation can be longer or shorter than others…so forget the timer and try to use the finished event Listener.

1 Like