threejs-animation

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

1|Updated Dec 6, 2023

Search Tags:#animation #three.js #glTF #AnimationMixer #morph-targets #AnimationClip #skeletal-animation

Ready to run

npx skills add https://github.com/tadams95/kardashev-network --skill threejs-animation-tadams95

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/tadams95/kardashev-network/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/tadams95/kardashev-network --skill threejs-animation-tadams95

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured approach to implementing and managing animations in Three.js, reducing the complexity of coordinating animation clips, mixers, and actions across scenes.

Core Features & Use Cases

AnimationClip, AnimationMixer, and AnimationAction: Understand and leverage the core animation primitives.
Playing GLTF Animations: Load models with GLTFLoader and drive animations in gltf.animations.
Procedural and Skeletal Animation: Create procedural motion, morph targets, and skeletal rigs with smooth blending and crossfades.

Quick Start

Set up a Three.js scene and load a GLTF model.
Create an AnimationMixer for the model and access gltf.animations.
Start a clip with action = mixer.clipAction(clips[0]); action.play();
In your render loop, call mixer.update(deltaTime) and use crossFadeTo for transitions.

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

To play glTF animations in Three.js, load your model with GLTFLoader, create an AnimationMixer, and access the animation clips via gltf.animations. You then start a specific clip using mixer.clipAction() and call play().

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

Blending skeletal animation clips in Three.js is best handled using AnimationAction methods like crossFadeTo. This allows smooth transitions between different animation states by updating the AnimationMixer in your render loop.

How does AnimationMixer work with morph targets?▼

AnimationMixer works with morph targets by tracking property changes defined in an AnimationClip. It updates morph target influences over time within the render loop, allowing procedural motion and facial expression blending.

Can I use Three.js AnimationClip for procedural motion?▼

Yes, you can use Three.js AnimationClip for procedural motion by programmatically defining keyframe tracks. The AnimationMixer then interpolates these tracks to drive dynamic movements alongside skeletal rigs.

Why does my Three.js animation freeze on the first frame?▼

Your Three.js animation freezes on the first frame if the AnimationMixer is not updated. You must call mixer.update(deltaTime) inside your render loop to advance the AnimationAction timeline.