# Working With 3D Object Animations

Unlike in the [simple editor](../../getting-started/editor-overview), in the [advanced](https://dashboard.mywebar.com/mae-editor/) 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** <a href="#id-34d62ey9qj65" id="id-34d62ey9qj65"></a>

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

{% hint style="info" %}
It is described how to add a 3D object in the article [interface-description](../how-the-pro-editor-works/interface-description "mention").
{% endhint %}

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FuaJnK1KfUxBs07hMZfR8%2Fimage.png?alt=media\&token=76374470-87f0-489f-95a3-16726d910518)

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

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FWeDvyZPPFd9ZUQUSLwyt%2Fimage.png?alt=media\&token=7a7c8c6f-ae4d-4ca9-9c86-9aac771b2947)

Here in the dropdown list you can see how many tracks the model has. Also, by clicking the <mark style="color:blue;">**PLAY**</mark> button, you can play the selected animation.

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2FoN8EL1kr4hOOLqeDBlgq%2Fimage.png?alt=media\&token=fb3fb37c-8c16-4f63-be9a-5626396d70d1)

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

## **Starting the animation** <a href="#id-39jkf5t4uarc" id="id-39jkf5t4uarc"></a>

In order for the 3D object to play animation when the scene starts, a [script ](../../how-the-pro-editor-works/basic-features#_pi1zzdmr3atr)needs to be created.

For instructions on how to create scripts, read[ ](https://learn.mywebar.com/v/yazyk-ru/pro-editor/kak-ustroen-pro-editor/osnovnye-vozmozhnosti#sozdanie-scenariev-dlya-sceny)[#\_pi1zzdmr3atr](../../how-the-pro-editor-works/basic-features#_pi1zzdmr3atr "mention").

### **Starting one animation** <a href="#o2sa8tsagwe9" id="o2sa8tsagwe9"></a>

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

![](https://3462873876-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FIqwMMglOZIuMlGrpgPV1%2Fuploads%2Fa7OuFCYJ8Bs6RRqLH3od%2Fimage.png?alt=media\&token=df8e6afb-03e1-4c62-bf66-4d1e30d6cbb7)

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).

{% hint style="info" %}
If you need to run multiple animations, multiple clips will be used in the code, so you need to create multiple variables.
{% endhint %}

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)**[ ](https://threejs.org/docs/#api/en/animation/AnimationMixer.clipAction)[**.clipAction**](https://threejs.org/docs/#api/en/animation/AnimationMixer.clipAction) will be written. This method returns **AnimationAction**.

{% hint style="info" %}
**AnimationAction** is needed to control the animation clips created on line 1 and 2.
{% endhint %}

Since this model has two animation clips, we need to create two variables that will return [**AnimationAction**](https://threejs.org/docs/#api/en/animation/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** <a href="#j498e2hlobi6" id="j498e2hlobi6"></a>

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.Cloc`k** 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.
