CODEWITHSUNDEEP
javascriptthree.js
qwerty
qwerty

Reputation: 49

How to animate 2 objects with 2 different animations one after another in 3 js?

I am working on creating an animation in 3 js. I am beginner at it and I figured out how to animate for 1 object by using the VectorKeyframeTrack function. I would like to perform it for 2 different animation (not group) for 2 different objects one after the other. I have gotten it to work concurrently, i.e. play the animation at the same time. How do I get the rectangle to move once the sphere has looped through 4 times. I was planning to use setTimeout. Is there a better way? 

const animationClip = new THREE.AnimationClip(null,3, [track1]);
const animationClip1 = new THREE.AnimationClip(null,3, [track]);
const animationAction = mesh.userData.mixer.clipAction(animationClip);
const animationAction1 = cube.userData.mixer.clipAction(animationClip1);

animationAction.setLoop(THREE.LoopRepeat ,4);
animationAction.play();
setTimeout(function(){
   animationAction1.setLoop(THREE.LoopRepeat ,4);
   animationAction1.play(); 
},6000);

Here is the js fiddle: https://jsfiddle.net/bpyLsfda/5/

Upvotes: 2

Views: 1640

Answers (1)

Mugen87
Mugen87

Reputation: 31026

Is there a better way?

Yes. Instead of using setTimeout(), you can register an event listener to the first animation mixer and listen for the finished event. Your code does now look like this:

mesh.userData.mixer.addEventListener( 'finished', ( /*event*/ ) => {

    animationAction1.setLoop( THREE.LoopRepeat ,4 );
    animationAction1.play(); 

} );

The event is fired when the playback of an animation action has been completed. You can also extract the respective action from the event object via event.action.

https://jsfiddle.net/6hzr0a9v/

three.js R106

Upvotes: 3

Related Questions