skills.rest
shige1014-dev
shige1014-devCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Create and blend Three.js animation clips for GLTF models.

1|Updated Apr 11, 2026
Search Tags:#animation#threejs#morph-targets#gltf#skeletal-animation#animation-mixer#keyframe-animation
One-click install
npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-animation-shige1014-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/shige1014-dev/backup-OpenMontage/tree/main/.agents/skills/threejs-animation
Command: npx skills add https://github.com/shige1014-dev/backup-OpenMontage --skill threejs-animation-shige1014-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill simplifies building, playing, and blending complex Three.js animations so developers can animate objects, characters, and morph targets without wrestling with low-level mixer and track management.

Core Features & Use Cases

  • Keyframe and Track Authoring: Create AnimationClips from NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, ColorKeyframeTrack, Boolean and String tracks.
  • Skeletal and GLTF Playback: Load GLTF models, construct AnimationMixer instances, play named clips, and manipulate skeleton bones and attachments.
  • Morph Targets & Blending: Drive morphTargetInfluences procedurally or via keyframes and blend multiple AnimationActions using weights, crossfades, additive layers, and loop modes.
  • Procedural Motion & Performance: Common patterns (damping, springs, oscillation) and tips to optimize mixers, cache clips, and pause off-screen animations.
  • Use Case: Seamlessly blend idle/walk/run animations on a GLTF character while animating facial morph targets and attaching props to bones.

Quick Start

Load a GLTF model, create an AnimationMixer for the model, play the desired clip by name, and call mixer.update(delta) every frame to advance the animation.

Frequently Asked Questions about threejs-animation

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

FAQPage Schema
How do I blend skeletal animations on a GLTF character in Three.js?▼

You blend Three.js animations by creating an AnimationMixer for your GLTF model and manipulating AnimationAction weights for crossfading or additive blending of multiple clips.

How do I create a keyframe animation for Three.js objects?▼

You create Three.js keyframe animations by constructing AnimationClips from NumberKeyframeTrack, VectorKeyframeTrack, or QuaternionKeyframeTrack instances to animate procedural object transforms.

How do I drive morph target animations in Three.js?▼

Drive Three.js morph target animations by adjusting morphTargetInfluences procedurally or through keyframes to animate facial expressions alongside skeletal motion.

What is the best way to optimize AnimationMixer performance in Three.js?▼

Optimize Three.js AnimationMixer performance by caching AnimationClips, pausing off-screen animations, and managing mixer updates to reduce unnecessary per-frame calculations.

Can I attach props to skeleton bones using Three.js animations?▼

Yes, you can attach props to skeleton bones in Three.js by loading a GLTF model and parenting object attachments directly to the specific bones within the skeleton hierarchy.

Does Three.js AnimationMixer support crossfading between different animation clips?▼

Yes, Three.js AnimationMixer supports crossfading between AnimationActions by interpolating weights, allowing smooth transitions between different animation clips during real-time rendering.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

threejs-animation

Automate three.js animation workflows for GLTF-enabled scenes.

Community
Advanced
mitgar14mitgar14

threejs-animation

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

Community
Intermediate
shiqkuangsanshiqkuangsan
17

tooyoung:threejs-builder

Generate Three.js web applications with scene setup, lighting, geometries, materials, and animations.

Community
Intermediate
simon-tannasimon-tanna

threejs-animation

Animate Three.js objects using keyframe tracks, AnimationClip, and AnimationMixer.

Community
Intermediate