threejs-animation

Implements keyframe, skeletal, and morph target animations in Three.js scenes.

Updated Jun 30, 2026
One-click install
npx skills add https://github.com/ayofemiade/cleva --skill threejs-animation-ayofemiade
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/ayofemiade/cleva/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/ayofemiade/cleva --skill threejs-animation-ayofemiade

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Animating 3D objects in Three.js requires coordinating AnimationClips, AnimationMixers, and AnimationActions, which is error-prone when loading GLTF animations, blending multiple clips, or driving bones and morph targets programmatically. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - Skeletal & GLTF Animation: Load animations from GLTF models, control bones directly, attach objects to bones, and visualize rigs with SkeletonHelper. - Animation Blending & Morph Targets: Crossfade between actions, blend idle/walk/run by weight, use additive blending, and animate morph target influences. - Use Case: Build a character controller that loads a GLB model, plays its Walk clip, crossfades to Run based on movement speed, and procedurally turns the head bone toward the camera. ## Quick Start Show me how to load a GLTF model and play its built-in Walk animation with an AnimationMixer in Three.js.

Frequently Asked Questions about threejs-animation

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

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

Load the model with GLTFLoader, create an AnimationMixer on gltf.scene, then call mixer.clipAction with a clip from gltf.animations and play it. Call mixer.update(delta) every frame in the animation loop.

How to blend between two animations in Three.js?▼

Create an AnimationAction for each clip on the same mixer, then use action1.crossFadeTo(action2, duration, true) to transition smoothly. You can also set effective weights on multiple playing actions to mix poses by speed or state.

Does Three.js support morph target animation?▼

Yes, meshes expose morphTargetInfluences and morphTargetDictionary for setting blend weights by index or name. You can animate them procedurally or with a NumberKeyframeTrack targeting .morphTargetInfluences[name].

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the requestAnimationFrame loop. Also verify the clip name exists in gltf.animations and that the action's weight is not zero.

How do I attach an object to a bone in Three.js?▼

Find the bone in the SkinnedMesh skeleton by name, then call bone.add(object) to parent it. Adjust the child's local position and rotation to offset the attachment relative to the bone.