threejs-animation

Name: threejs-animation
Availability: InStock
Author: firstsun-dev

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

3|1|Updated Apr 29, 2026

Search Tags:#animation #webgl #three.js #keyframe #gltf #skeletal animation #morph targets

Ready to run

npx skills add https://github.com/firstsun-dev/skills --skill threejs-animation-firstsun-dev

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/firstsun-dev/skills/tree/main/plugins/frontend-product-design/skills/threejs-animation
Command: npx skills add https://github.com/firstsun-dev/skills --skill threejs-animation-firstsun-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Animating 3D objects in Three.js requires coordinating AnimationClips, AnimationMixers, and AnimationActions, plus handling GLTF skeletal data and morph targets, which is error-prone without a structured reference. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - GLTF & Skeletal Animation: Load GLTF animations, control bones programmatically, and attach objects to skeleton bones. - Animation Blending: Crossfade between actions, blend idle/walk/run states by weight, and apply additive blending layers. - Use Case: When building a character controller, use this Skill to load a GLTF model, play its Walk clip through an AnimationMixer, and smoothly crossfade to a Run clip based on movement speed. ## Quick Start Use the threejs-animation skill to load my model.glb file and play its Walk animation with a crossfade to Idle when the character stops moving.

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(clip).play() with a clip from gltf.animations. You must call mixer.update(delta) every frame in the animation loop for playback to advance.

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

Use action.crossFadeTo(otherAction, duration, true) to smoothly transition between clips, or set effective weights on multiple playing actions. For locomotion, adjust idle, walk, and run action weights based on character speed.

Does Three.js support skeletal animation and bone control?▼

Yes, SkinnedMesh objects expose a skeleton with named bones you can rotate or position programmatically. You can also attach objects like weapons to specific bones and visualize the rig with SkeletonHelper.

How do I animate morph targets in Three.js?▼

Set values in mesh.morphTargetInfluences by index, or look up indices via mesh.morphTargetDictionary by name. For keyframed morph animation, create a NumberKeyframeTrack targeting .morphTargetInfluences[name] and play it through a mixer.

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the render loop, which is required to advance animation time. Also verify the clip name exists with AnimationClip.findByName and that the action's weight is not zero.