> For the complete documentation index, see [llms.txt](https://docs.hology.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hology.app/gameplay/animation/animation-system.md).

# 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
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.