skills.rest
X-manist
X-manistCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

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

Updated Jul 16, 2026
Search Tags:#animation#webgl#three.js#keyframe#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/X-manist/Cohmira --skill threejs-animation-x-manist
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/X-manist/Cohmira/tree/main/src/builtin-plugins/openmontage/.agents/skills/threejs-animation
Command: npx skills add https://github.com/X-manist/Cohmira --skill threejs-animation-x-manist

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 GLTF animation clips, control bones directly, attach objects to bones, and visualize rigs with SkeletonHelper. - Animation Blending & Morph Targets: Crossfade between actions, apply additive blending, and animate morphTargetInfluences for facial or shape deformation. - Use Case: When building a character that transitions from idle to walk to run based on movement speed, use weight-based blending across three AnimationActions updated each frame. ## Quick Start Ask the AI to load a GLTF model, play its walk animation with an AnimationMixer, and crossfade to an idle clip after two seconds.

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. Call mixer.update(delta) every frame in the animation loop.

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

Use action.crossFadeTo(otherAction, duration, true) to transition smoothly, or set effective weights on multiple playing actions to mix them by ratio. Additive blending is available via AdditiveAnimationBlendMode.

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 NumberKeyframeTrack clips targeting .morphTargetInfluences[name].

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the render loop. Also verify the action was started with play(), the clip name matches, and the mixer targets the correct root object.

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

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

Related Skills

Explore More Software Engineering Skills→
hanzoaihanzoai

threejs-fundamentals

Create a minimal Three.js scene with rotating cube, lighting, and animation loop for web browsers.

Official
Intermediate
fal-ai-communityfal-ai-community
224

fal-regenerate-3d

Generate interactive 3D character selectors with Three.js scenes.

Official
Advanced
LuXDAmoreLuXDAmore

threejs-shaders

Develop custom GLSL shaders for Three.js ShaderMaterial.

Community
Advanced
GabeujinGabeujin

game-engine

Develop web-based games and game engines with HTML5, Canvas, WebGL, and JavaScript frameworks.

Community
Advanced