skills.rest
calesthio
calesthioCOMMUNITY
Explore all skills by this author →
𝕏@calesthioailabsGitHub

threejs-animation

Creates and controls animations for SketchUp models and components.

46.2k|5.7k|Updated Mar 29, 2026
Search Tags:#animation#threejs#morph-targets#gltf#skeletal-animation#animation-blending#mixer
One-click install
npx skills add https://github.com/calesthio/OpenMontage --skill threejs-animation-calesthio
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/calesthio/OpenMontage/tree/main/.agents/skills/threejs-animation
Command: npx skills add https://github.com/calesthio/OpenMontage --skill threejs-animation-calesthio

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill consolidates guidance for creating, controlling, and optimizing animations in Three.js so developers can play GLTF clips, author keyframe and skeletal motion, and combine procedural movement without reinventing animation workflows.

Core Features & Use Cases

  • Playback and control: Use AnimationClip, AnimationMixer, and AnimationAction to play, pause, seek, and time-scale animations.
  • Skeletal and keyframe animation: Load GLTF animations, access skeletons and bones, and drive bones programmatically for character motion.
  • Morph targets and procedural motion: Animate morphTargetInfluences for expressions and implement procedural patterns like springs, oscillation, and smooth damping.
  • Blending and additive layers: Crossfade between actions, set effective weights, use additive clips for layered motions, and manage loop modes and clamping.
  • Use case: Blend idle/walk/run cycles for a GLTF character while applying additive breathing and morph-based facial expressions for realism.

Quick Start

Load your GLTF model into the scene, create an AnimationMixer for the model, play named clips with mixer.clipAction, and crossfade between them to blend a walk and idle cycle.

Frequently Asked Questions about threejs-animation

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

FAQPage Schema
How do I play and blend GLTF animations in Three.js?▼

To play GLTF animations in Three.js, load your model, create an AnimationMixer, and use mixer.clipAction to retrieve named clips. You can then crossfade between actions to blend idle, walk, and run cycles smoothly for character motion.

What is the best way to control skeletal rigs and bones programmatically in Three.js?▼

Controlling skeletal rigs in Three.js involves loading GLTF animations to access skeletons and bones, then driving those bones programmatically. This allows developers to create custom character motion beyond predefined keyframes and apply procedural patterns.

How does morphTargetInfluences work for facial expressions in Three.js?▼

MorphTargetInfluences in Three.js animate facial expressions by interpolating between vertex states. You adjust influence weights per frame to blend shapes, creating realistic expressions during skeletal and keyframe animation playback.

Can I use additive blending to layer breathing over a walk cycle in Three.js?▼

Additive blending in Three.js layers clips over a base animation by setting effective weights. You can apply an additive breathing clip over a walk cycle, combining crossfaded actions with layered motions for more realistic character movement.

Do I need to call mixer.update every frame for Three.js animations?▼

Yes, you must call mixer.update with the delta time every frame for Three.js animations to progress. This per-frame mixer.update call is required to support interpolation, time-scaling, and proper playback of AnimationAction clips.

Related Skills

Explore More Design & Creative Skills→
norrbackanorrbacka

threejs-fundamentals

Set up and repair Three.js scene infrastructure with cameras, renderers, and animation loops.

Community
Intermediate
mitgar14mitgar14

threejs-animation

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

Community
Intermediate
nicolasieber-tmnicolasieber-tm

threejs-animation

Animate Three.js scenes with keyframes, skeletal rigs, and morph targets.

Community
Advanced
Lyiu-10Lyiu-10

threejs-animation

Implement Three.js and React Three Fiber 3D animations with keyframe, skeletal, and morph blending.

Community
Intermediate