AnimationSystem

Drives the animation state machine for every entity that has an AnimationComponent. Each frame it advances the THREE.js AnimationMixer, processes clip source loads (model clips and external GLTF sources), and applies the active state's cross-fade transitions.

Overview

AnimationSystem runs every frame and is responsible for:

• Loading clips from external GLTF sources on demand and merging them with model-embedded clips.
• Building and maintaining a THREE.AnimationMixer per entity.
• Playing, pausing, stopping, and reversing clips via THREE.AnimationAction.
• Executing cross-fades between animation states using the state machine configured on AnimationComponent.
• Replaying the last persisted state after hydration (saved activeState, paused, reverse, timeScale).

Queried components

Component	Access
AnimationComponent	Read + mutate (clips, clipCatalog, availableClips, mixer state)
ModelComponent	Read (source URL, loaded model clips)

Behavior notes

• Editor vs preview — the system runs in both editor and preview runtimes. In the editor it powers the viewport animation preview. In preview it drives live playback.
• External clip sources — if AnimationComponent.externalClipSources lists remote URLs, the system loads each via GLTFLoader (with optional DRACO support). Loaded clips are merged into the entity's catalog and catalog entries are kept stable across reloads.
• State machine — transitions call THREE.AnimationAction.crossFadeTo() using AnimationComponent.crossFadeDuration. The active action's time scale is negated automatically when reverse is true.
• Delta time clamping — the delta time passed to each mixer is clamped to [0, +∞) and non-finite values are treated as 0 to prevent unstable playback after tab focus returns.

API reference

• Class: AnimationComponent
• Source: core/systems/AnimationSystem.ts