threejs-animation_skill

Overview

This skill provides practical guidance and utilities for creating and managing animations in Three.js, covering keyframe clips, mixers, skeletal rigs, morph targets, procedural motion, and blending. It helps you play GLTF animations, drive bones and morphs, and blend or layer animations for interactive scenes. The focus is on actionable patterns, performance tips, and common utilities for real-time projects.

How this skill works

It explains Three.js animation primitives: AnimationClip (keyframe data), AnimationMixer (playback engine), and AnimationAction (playback control). It shows how to create keyframe tracks (number, vector, quaternion, color, boolean, string), load GLTF clips, attach mixers to scene objects, and update mixers each frame. It also covers skeletal access, morph target manipulation, procedural techniques (damping, springs, oscillation), and blending strategies including additive layers and crossfades.

When to use it

• Animating transform, material, or morph properties with keyframes
• Playing skeletal animations from GLTF models
• Creating procedural motion (springs, damping, oscillation)
• Blending multiple actions or layering additive animations
• Optimizing animation updates for performance-sensitive scenes
• Attaching objects to bones or driving bones programmatically

Best practices

• Update mixers with delta time each frame (mixer.update(delta)) and pause off-screen mixers to save CPU
• Reuse and cache AnimationClip instances across mixers to reduce memory and parsing cost
• Use clip.optimize() to remove redundant keyframes before playback
• Prefer QuaternionKeyframeTrack for rotations to avoid gimbal issues
• Convert commonly used clips to additive for small layered adjustments (AnimationUtils.makeClipAdditive)
• Limit number of active mixers and use LOD or simpler rigs for distant characters

Example use cases

• Play multiple GLTF animations and crossfade between idle, walk, and run based on player speed
• Drive a character’s head bone to look at a target while mixer controls body animations
• Animate facial expressions via morphTargetInfluences using keyframe or procedural oscillation
• Create smooth follow behavior using smoothDamp for camera or object movement
• Layer a subtle breathing additive clip over a base pose for realism