Working With 3D Object Animations

Unlike in the simple editor, in the advanced one, you can work with animations in a more extensive way. You can either run several animations in a row, or just make animations at regular time intervals.

Adding a 3D object and checking it

To work with animations, the first step is to add a 3D object to the scene and check it for the presence of animations.

It is described how to add a 3D object in the article Interface Description.

An additional block will appear on the right next to objects with animation.

Here in the dropdown list you can see how many tracks the model has. Also, by clicking the PLAY button, you can play the selected animation.

Therefore, if all the necessary animations are functioning properly, you can start working with them.

Starting the animation

In order for the 3D object to play animation when the scene starts, a script needs to be created.

For instructions on how to create scripts, read Basic features.

Starting one animation

Next, inside the code editor of the created script, you need to write a few strings of code.

The first step is to create a new variable that will contain the animation clip that has to be started (string 1).

const clip = this.animations[0];

Let`s take a look at this code: this is a call to this 3D model (if the script is linked to a 3D object), animations is an array of all animation clips of the object, [0] is the sequence number of the clip (the counting always starts from 0, since this is an array, and the last clip will have the number n-1).

If you need to run multiple animations, multiple clips will be used in the code, so you need to create multiple variables.

Since in this case the model has two clips, you need to create variables for both of them at once (strings 1-2).

const clipOne = this.animations[0];
const clipTwo = this.animations[1];

Now AnimationMixer needs to be created. AnimationMixer is a player for animating an object on the scene (string 3).

const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);

As a parameter of the method, you need to transfer a 3D object that you want to animate.

The next step is to create a variable into which the mixer method (AnimationMixer) .clipAction will be written. This method returns AnimationAction.

AnimationAction is needed to control the animation clips created on line 1 and 2.

Since this model has two animation clips, we need to create two variables that will return AnimationAction (strings 4-5).

const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);

Next, you need to make AnimationMixer update every frame. If it is not done, the animation simply will not run or it will not work properly. To do this, you need to create a new variable in which the THREE.Clock object will be placed. It is needed to track time (string 1).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);

After that, you need to create the update() function. This is the function that calls every frame (strings 8-10).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);

function update() {

}

Inside this function, you need to create a conditional if statement, which, checking for the presence of the mixer, will update the animation every frame. It will look like this (strings 9-11).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);

function update() {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
}

That’s it, now everything is ready to start the animation. With AnimationAction, you can start any clip, for example, the first one (string 7).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);
actionforClipOne.play();

function update() {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
}

Running several (two) animations in a row

Now, after we have learned how to start one animation, we can move on to starting several animations in a row. To do this, we will use the THREE.Clock integrated into THREE.js and update() function.

The code for starting the first animation, created above:

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);
actionforClipOne.play();

function update() {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
}

Next, you need to create another conditional if statement inside the update() function, which will check whether a time has passed since the start of the scene, equal to the duration of the first animation track (clipOne). Inside the operator, the number of seconds (clipOne.duration) of the first clip will be compared with the current time (clock.elapsedTime()).

This is necessary in order to stop the animation of the first clip and immediately play the animation of the second clip (strings 13-15).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);
actionforClipOne.play();

function update() {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
	if (clipOne.duration < clock.getElapsedTime()) {
	
	} 
}

Now you need to add the code that will be executed inside the condition. This piece of code should stop playing the first clip and start the second one (string 14).

const clock = new THREE.Clock();
const clipOne = this.animations[0];
const clipTwo = this.animations[1];
const mixer = new THREE.AnimationMixer(this);
const actionforClipOne = mixer.clipAction(clipOne);
const actionforClipTwo = mixer.clipAction(clipTwo);
actionforClipOne.play();

function update() {
	if (mixer) {
		mixer.update(clock.getDelta());
	}
	if (clipOne.duration < clock.getElapsedTime()) {
		actionforClipOne.stop();
		actionforClipTwo.play();
	} 
}

Thus, after the end of the playing of the first animation of the model, the second one will start immediately.