# Animation system

The rendering library Three.js used in Hology Engine provides an animation system that you can you on its own. Take a look at the [official Three.js documentation](https://threejs.org/docs/#manual/en/introduction/Animation-system) to get a better understanding of how to directly use animation clips, mixer, actions and more.

Below we can see how an Animation Mixer can be used to play animations.

```typescript
import { Actor, AssetLoader, BaseActor, inject } from '@hology/core/gameplay';
import * as THREE from 'three';

@Actor()
class Character extends BaseActor {
  private assetLoader = inject(AssetLoader)
  private mixer: THREE.AnimationMixer

  async onInit(): Promise<void> {
    // We load a model by name that has previously been 
    // imported to the project in the editor.
    const model = await this.assetLoader.getModelByAssetName('character-human')
    const mesh = model.scene
    // Adding the model to the actor's object to be rendered. 
    this.object.add(mesh)    

    // Each object to be animated needs its own animation mixer
    const mixer = new THREE.AnimationMixer(mesh)
    // Find a clip from loaded animations by name
    const clip = THREE.AnimationClip.findByName(model.animations, 'idle')
    const action = mixer.clipAction(clip)
    action.play()

    this.mixer = mixer
  }

  onUpdate(deltaTime: number): void {
    this.mixer.update(deltaTime)
  }

}

export default Character
```

You can download this example project to see the code in action.

{% embed url="<https://github.com/hologyengine/animation-tutorial/tree/main>" %}

The above example illustrates how to use the constructs provided by the rendering library ThreeJS for playing animations. If you want to animate something like a character, it can be better to use Hology Engine's `CharacterAnimationComponent` which provides easier ways of transitioning between animations and playing different animations for upper and lower body.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.hology.app/gameplay/animation/animation-system.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.