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