threejs-impl-animation

Implements Three.js skeletal animation playback, crossfades, and blending with AnimationMixer and GLTF clips.

1|Updated Aug 20, 2023
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-animation-imanlangaran
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: threejs-impl-animation
Source: https://github.com/imanlangaran/mini-projects/tree/main/react/three-gsap/.claude/skills/threejs-impl-animation
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-impl-animation-imanlangaran

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three, and includes references (resource) components.

What problem does it solve? Three.js animations silently fail when developers forget to call mixer.update(delta) every frame, misconfigure crossfades, or skip clampWhenFinished on one-shot clips. This Skill provides correct patterns and API references for the Three.js animation system so animations play, blend, and transition as intended. ## Core Features & Use Cases - AnimationMixer and AnimationAction guidance: Correct setup of one mixer per model, clipAction caching, loop modes, fading, and warping. - Crossfade state machines: Ready-to-use patterns for transitioning between idle, walk, and run clips with proper reset() handling. - Anti-pattern catalog: Eleven documented mistakes (missing mixer.update, fixed deltas, multiple mixers per model) with corrections. - Use Case: A developer loads a GLTF character whose animations stay frozen; the Skill identifies the missing mixer.update(delta) call and supplies the corrected render loop. ## Quick Start Ask the assistant to set up Three.js animation playback for a GLTF model with crossfading between animation states.

Frequently Asked Questions about threejs-impl-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I play GLTF animations in Three.js?

Create one AnimationMixer with the loaded gltf.scene as root, then call mixer.clipAction(clip).play() for each clip in gltf.animations. You must call mixer.update(clock.getDelta()) every frame in the render loop or animations stay frozen.

How to crossfade between animation states in Three.js?

Call reset() on the incoming action, set its timeScale and weight to 1, then use crossFadeFrom(currentAction, duration, true) followed by play(). Store the current action reference so the next transition fades from the correct source.

Why is my Three.js animation not playing?

The most common cause is a missing mixer.update(delta) call in the render loop; the mixer does not advance time on its own. Also verify you used THREE.Clock for delta rather than a fixed value, and that play() was called once, not every frame.

Why does my LoopOnce animation snap back to the first frame?

Without clampWhenFinished = true, a LoopOnce action resets to its initial state when it completes. Set action.clampWhenFinished = true before calling play() so the model holds the final pose.

Can I use multiple AnimationMixers on the same model?

No, multiple mixers on one root object cause conflicting property writes, producing jittering or broken animation. Use a single mixer per model and blend clips with weight and crossfade methods instead.

How do I animate material opacity with KeyframeTrack in Three.js?

Create a NumberKeyframeTrack targeting 'meshName.material.opacity' and add it to an AnimationClip. You must set material.transparent = true first, otherwise opacity values below 1 have no visual effect during rendering.