skills.rest
OpenAEC-Foundation
OpenAEC-FoundationOFFICIAL
Explore all skills by this author →
GitHub

threejs-impl-animation

Manage Three.js animation clips from GLTF assets with AnimationMixer.

11|Updated Mar 20, 2026
Search Tags:#animation#threejs#gltf#skeletal-animation#crossfade#animation-mixer#additive-blending
One-click install
npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-animation
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-impl-animation
Source: https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package/tree/main/skills/source/threejs-impl/threejs-impl-animation
Command: npx skills add https://github.com/OpenAEC-Foundation/Three.js-Claude-Skill-Package --skill threejs-impl-animation

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Streamlines reliable animation playback in Three.js by providing structured guidance on AnimationMixer, AnimationClip, and AnimationAction usage, crossfades, and velocity control for skeletal animations.

Core Features & Use Cases

  • Setup and orchestrate AnimationMixer-based playback for GLTF-skeletal models in Three.js r160+.
  • Implement crossfades, additive blending, and morph-target animation with safe defaults and best practices.
  • Use in interactive scenes, procedurally control animations, or drive character states with predictable timing.

Quick Start

Load a GLTF model with animations and start playing all embedded clips using a single AnimationMixer.

Frequently Asked Questions about threejs-impl-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I play skeletal animations from a GLTF model in Three.js?▼

To play skeletal animations from a GLTF model in Three.js, load the asset and use a single AnimationMixer per root object to manage AnimationClip and AnimationAction tracks, updating the mixer with consistent clock delta values in the render loop.

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

Crossfading animation clips in Three.js is achieved by managing AnimationAction objects through an AnimationMixer, applying smooth transitions between active skeletal animations with predictable timing and safe defaults.

Does Three.js r160 support additive blending for skeletal animations?▼

Yes, Three.js r160+ supports additive blending for skeletal animations, allowing layers to be combined on a single AnimationMixer to drive complex character states and procedural animations.

Why does my Three.js animation freeze or loop incorrectly in the render loop?▼

Three.js animations freeze or loop incorrectly when the AnimationMixer is not updated with consistent clock delta values in the render loop, disrupting the timing of AnimationAction playback.

Can I use morph-target animation with an AnimationMixer in Three.js?▼

Yes, you can use morph-target animation with an AnimationMixer in Three.js, combining it with skeletal animations and additive blending to orchestrate complex character states predictably.

Related Skills

Explore More Software Engineering Skills→
EntelligentsiaEntelligentsia
1

threejs-animation

Automate Three.js animation workflows for GLTF models with AnimationClip and AnimationMixer.

Official
Advanced
afoveaafovea

threejs-animation

Manage 3D animation playback and skeletal blending in Three.js.

Community
Advanced
jtgironjtgiron

threejs-animation

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

Community
Advanced
ElementTechElementTech
2

threejs-shaders

Create custom GLSL shaders for Three.js visual effects.

Community
Intermediate