Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.

Three.js Animation Quick Start Animation System Overview Three.js animation system has three main components: 1. AnimationClip Container for keyframe data 2. AnimationMixer Plays animations on a root object 3. AnimationAction Controls playback of a clip AnimationClip Stores keyframe animation data. KeyframeTrack Types Interpolation Modes AnimationMixer Plays animations on an object and its descendants. Mixer Events AnimationAction Controls playback of an animation clip. Fade In/Out Loading GLTF Animations Most common source of skeletal animations. Skeletal Animation Skeleton and Bones Programmatic Bone Animation Bone Attachments Morph Targets Blend between different mesh shapes. Animating Morph Targets Animation Blending Mix multiple animations together. Additive Blending Animation Utilities Procedural Animation Patterns Smooth Damping Spring Physics Oscillation Performance Tips 1. Share clips : Same AnimationClip can be used on multiple mixers 2. Optimize clips : Call clip.optimize() to remove redundant keyframes 3. Disable when off screen : Stop mixer updates for invisible objects 4. Use LOD for animations : Simpler rigs for distant characters 5. Limit active mixers : Each mixer.update() has a cost See Also threejs loaders Loading animated GLTF models threejs fundamentals Clock and animation loop threejs shaders Vertex animation in shaders

threejs-animation