Animate 3D Models with Three.js

This skill covers animating objects, rigs, morph targets, and imported GLTF animations in Three.js, spanning the mixer/clip/action system, skeletal animation, and procedural motion patterns. It recommends THREE.Timer over the legacy THREE.Clock (as of r183, since Timer pauses when the page is hidden and has a cleaner API), demonstrated with renderer.setAnimationLoop. It explains the three-part animation system - AnimationClip (keyframe data container), AnimationMixer (plays animations on a root object, requiring mixer.update(delta) every frame), and AnimationAction (controls clip playback) - and every keyframe track type (Number, Vector, Quaternion, Color, Boolean, String for morph targets) with three interpolation modes (Linear, Smooth/cubic-spline, Discrete/step), plus r183's new BezierInterpolant for tangent-controlled bezier curves. AnimationAction coverage includes play/stop/reset/halt controls, time/timeScale/paused state, blend weight for mixing multiple actions, loop modes (LoopRepeat, LoopOnce, LoopPingPong) with repetition counts, clampWhenFinished, fade in/out and crossfade between actions, and blend modes (Normal vs Additive). It shows loading GLTF animations via GLTFLoader, finding a clip by name with AnimationClip.findByName, and driving the mixer in the render loop. Skeletal animation coverage includes accessing a SkinnedMesh's skeleton and bones, finding and manually posing a specific bone (e.g. turning a head), visualizing with SkeletonHelper, combining programmatic bone animation with mixer-driven clips, and attaching objects (like a weapon) to a bone with an offset. Morph target coverage shows accessing morphTargetInfluences/morphTargetDictionary, setting influences by index or name, animating them procedurally or via a NumberKeyframeTrack. Animation blending demonstrates mixing multiple simultaneous actions (idle/walk/run) by adjusting setEffectiveWeight based on a speed parameter, and additive blending for layering effects like breathing over a base pose via AnimationUtils.makeClipAdditive. Animation utilities cover finding clips, extracting subclips, cloning, optimizing (removing redundant keyframes), and resetting duration. Procedural animation patterns include a smooth-damping/lerp-follow function, a custom spring-physics class (stiffness/damping/velocity), and oscillation patterns (sine wave, bounce, circular motion, figure-8). Performance tips: share AnimationClips across multiple mixers, call clip.optimize() to strip redundant keyframes, pause mixer updates for off-screen objects, use simpler rigs at LOD distance, and cache loaded clips to avoid redundant loads.

Use it when animating objects, rigs, morph targets, or imported GLTF animations in Three.js - working with mixers, clips, keyframes, procedural motion, or animation blending - rather than just static rendering. It cross-references companion skills for loading animated GLTF models, the animation-loop/Clock fundamentals, and vertex animation in shaders, which are out of its own scope.

Inputs: a Three.js scene with a mesh, skinned model, or GLTF animation to animate, and the desired motion (keyframe clip, skeletal pose, morph target, or procedural pattern).
Outputs: working Three.js JavaScript code for the requested animation approach - mixer/action setup, keyframe tracks, bone manipulation, morph target blending, or procedural motion functions.

const mixer = new THREE.AnimationMixer(model);
const action = mixer.clipAction(clip);
action.play();

function animate() {
  const delta = clock.getDelta();
  mixer.update(delta);
  requestAnimationFrame(animate);
}

Three.js developers building animated scenes - character rigs, GLTF model animation, morph target blending, or procedural motion - who need correct mixer/action/clip usage and blending techniques.