skills.rest
ratnesh-maurya
ratnesh-mauryaCOMMUNITY
Explore all skills by this author →
Website𝕏@_ratneshmauryaGitHub

threejs-animation

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

1|Updated Aug 17, 2025
Search Tags:#animation#webgl#three.js#keyframe#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-animation-ratnesh-maurya
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/ratnesh-maurya/mdconverter/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/ratnesh-maurya/mdconverter --skill threejs-animation-ratnesh-maurya

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 without clear patterns for keyframes, skeletal rigs, morph targets, and blending. ## 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, attach objects to bones, and visualize rigs with SkeletonHelper. - Blending & Morph Targets: Crossfade between actions, apply additive blending, and animate morph target influences for facial or shape deformation. - Use Case: Load a character GLB with Walk, Idle, and Run clips, then blend between them based on movement speed using action weights and crossfades. ## Quick Start Ask the AI to load a GLTF model and play its walk animation with an AnimationMixer updated in the render loop.

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 render 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 proportion. Additive blending uses THREE.AdditiveAnimationBlendMode with makeClipAdditive.

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 to bones and visualize rigs with SkeletonHelper.

Why is my Three.js animation not playing?▼

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

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

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

Related Skills

Explore More Software Engineering Skills→
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
basabecodebasabecode

threejs-animation

Orchestrate complex Three.js animations including keyframe, skeletal, morph-target blending with GLTF assets.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

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

Community
Intermediate
GabeujinGabeujin

game-engine

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

Community
Advanced