threejs-animation

This skill provides comprehensive support for the Three.js Animation system, enabling developers to implement sophisticated motion in 3D environments. It covers the core architectural components including AnimationClip for data storage, AnimationMixer for playback orchestration on object hierarchies, and AnimationAction for granular control over individual animation states. Whether you are building interactive 3D web experiences, games, or data visualizations, this resource guides you through the complexities of skeletal skinning, morph target manipulation, and procedural movement generation.

• Full implementation of keyframe tracks including Number, Vector, Quaternion, Color, Boolean, and String types for fine-grained object property control.

• Advanced animation playback features such as cross-fading, weight-based blending, loop mode configuration (Once, Repeat, PingPong), and time-scale modulation.

• Integration patterns for loading GLTF/GLB models using GLTFLoader, including extracting and playing specific animation clips from multi-animation files.

• Skeletal animation workflows covering Skeleton and Bone hierarchy navigation, programmatic bone manipulation, and the use of SkeletonHelper for debugging joint transforms.

• Event-based animation handling, including listeners for loop cycles and completion callbacks to trigger subsequent logic in complex state machines.

• Use this skill when you need to animate meshes, lights, materials, or custom object properties using standard Three.js lifecycle methods like requestAnimationFrame and the Clock API.

• Ensure you properly initialize the AnimationMixer with a root object and call mixer.update(delta) inside your render loop; failing to call the update function is a common source of silent animation failures.

• Leverages the three/examples/jsm/loaders/GLTFLoader module to handle complex assets with Draco compression or multi-track skeletal animation data.

• Best suited for developers creating character controllers, UI animations, or dynamic scene transitions in WebGL applications built with Three.js (r160+).

• Always prefer using crossFadeTo and fadeIn/fadeOut methods for smooth transitions between animation states to avoid visual snapping or jitter in character movement.