skills.rest
firstsun-dev
firstsun-devOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-animation

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
One-click install
npx skills add https://github.com/firstsun-dev/skills --skill threejs-animation-firstsun-dev
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Design & Creative Skills→
tadams95tadams95
1

threejs-animation

Manage Three.js animation clips, mixers, and actions with GLTFLoader.

Community
Intermediate
OmerZeyveliOmerZeyveli
3

character-controller

Build 2D or 3D character controllers in Unity with Input System integration.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
tippyentertainmenttippyentertainment

unity-2d-game-developer

Guide Unity developers in designing, implementing, debugging, and optimizing 2D games and tools.

Community
Advanced