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

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.

GitHub - hologyengine/animation-tutorial: Hology animation examplesGitHub

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.