skills.rest
sbalagan22
sbalagan22COMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Implement Three.js animations with keyframes, skeletal rigs, morph targets, and blending.

1|Updated Mar 23, 2026
Search Tags:#animation#webgl#threejs#morph-targets#gltf#skeletal-animation#animation-blending
One-click install
npx skills add https://github.com/sbalagan22/bloomr --skill threejs-animation-sbalagan22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/sbalagan22/bloomr/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/sbalagan22/bloomr --skill threejs-animation-sbalagan22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provides practical guidance and ready-to-use patterns for implementing Three.js animations, including keyframe animations, skeletal rigs, morph targets, and animation blending, so developers can build smooth, interactive 3D experiences.

Core Features & Use Cases

  • Structured guidance on constructing AnimationClip, AnimationMixer, and AnimationAction for robust playback control.
  • Practical examples of keyframe tracks, bone-driven motion, and morph target animation for dynamic characters and objects.
  • Use Case: Build a simple interactive character with walk cycles, blending between idle and motion clips, and exportable animation sequences for GLTF assets.

Quick Start

Create a minimal Three.js scene and implement a simple procedural animation loop showing a rotating object.

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?▼

Skeletal animation in Three.js works by using keyframe tracks to drive bone transformations over time. You construct AnimationClip instances containing these tracks and apply them to a rigged mesh using an AnimationMixer and AnimationAction to achieve dynamic character motion.

How does morph target animation work in Three.js?▼

Morph target animation in Three.js interpolates between predefined vertex states using keyframe tracks. By blending these morph target influences through an AnimationMixer, you can create complex facial expressions or shape deformations for dynamic objects.

What is the best way to blend between animation clips in Three.js?▼

The best way to blend animation clips in Three.js is by using multiple AnimationAction instances tied to a single AnimationMixer. You can cross-fade between actions like idle and walk cycles by adjusting their weights, ensuring smooth procedural motion transitions.

Do I need AnimationMixer to create keyframe animations in Three.js?▼

Yes, AnimationMixer is required to drive keyframe animations in Three.js. You use it to manage the playback timeline of AnimationClip instances, while AnimationAction controls the specific state, speed, and blending of those keyframe tracks for your 3D objects.

Can I implement procedural motion without GLTF assets in Three.js?▼

You can implement procedural motion by manually constructing AnimationClip instances and defining keyframe tracks for object properties. This allows you to animate rotating objects or simple interactive loops without relying on imported GLTF animation sequences.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
mitgar14mitgar14

threejs-animation

Animate Three.js objects, clips, and rigs in real time.

Community
Intermediate
jtgironjtgiron

threejs-animation

Build and control Three.js animations with AnimationMixer and AnimationAction.

Community
Advanced
MonichreMonichre

threejs-animation

Implement Three.js keyframe, skeletal, and morph target animations with AnimationMixer.

Community
Intermediate