THREE.JS / FOUNDATIONS 99
Make motion a system.
Model animation as named states, one-time actions, masked layers, and managed clip lifecycles instead of a pile of play calls.
Initializing
-
Preparing state actions, a masked additive layer, and a reusable clip library.
- State
- -
- Event
- -
- Actions
- -
- Clips
- -
State machine-
Looping states
One-time emotes
Looping states crossfade; emotes use LoopOnce and restore the selected state on the mixer finished event.
Layered animation mask-
- Base tracks
- -
- Overlay tracks
- -
-
Clip library-
- Prepared name
- -
- Duration
- -
- Tracks
- -
- Rebuilds
- -
AnimationClip.findByName() selects the source; cloned clips can be trimmed, optimized, and uncached with their actions.
Production-minded animation lifecycle
clip registry->state/action cache->mask layer->finished event->uncache
Three independent mixers keep the state machine, mask layer, and library preview observable.
Animation state study unavailable.
The mask is an explicit track filter, not a hidden engine feature. Add ?forceWebGL=1 for a WebGL2 comparison.
LAB 99 / ANIMATION STATE SYSTEM