skills.rest
tadams95
tadams95COMMUNITY
Explore all skills by this author →
Website𝕏@tyrelle_adamsGitHub

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
One-click install
npx skills add https://github.com/tadams95/kardashev-network --skill threejs-animation-tadams95
Or copy as Structured Prompt for Agent▼
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

  1. Set up a Three.js scene and load a GLTF model.
  2. Create an AnimationMixer for the model and access gltf.animations.
  3. Start a clip with action = mixer.clipAction(clips[0]); action.play();
  4. 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.

Related Skills

Explore More Software Engineering Skills→
shige1014-devshige1014-dev

threejs-loaders

Load and manage GLTF, texture, and HDR environment assets in Three.js.

Community
Advanced
truongnattruongnat

3d-motion-pro

Build Three.js/WebGL scenes with GLTF models, GLSL shaders, and WebXR.

Community
Advanced
MonichreMonichre

threejs-animation

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

Community
Intermediate
efekrbasefekrbas
41

threejs-animation

Design and control Three.js animations with keyframe tracks, GLTF playback, and blending.

Community
Advanced