skills.rest
huangzida
huangzidaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

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

2|1|Updated Mar 26, 2026
Search Tags:#animation#webgl#three.js#skeleton#morph-targets#gltf#animation-blending
One-click install
npx skills add https://github.com/huangzida/skills --skill threejs-animation-huangzida
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/huangzida/skills/tree/main/threejs-animation
Command: npx skills add https://github.com/huangzida/skills --skill threejs-animation-huangzida

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js animation complexity is high when coordinating keyframes, skeletal rigs, and morph targets across assets and scenes; this Skill provides a structured approach to building, blending, and controlling animations in web 3D projects.

Core Features & Use Cases

  • Keyframe-based animation using AnimationClip, AnimationMixer, and AnimationAction for precise motion.
  • Skeletal animation and bone manipulation, including bone rotations and attachments.
  • Morph targets and blend shapes support for facial expressions and shape changes.
  • GLTF model loading and runtime animation playback with GLTFLoader, clip extraction, and mixer management.
  • Use Case: Build an interactive 3D product viewer with character animations and procedural motion.

Quick Start

Create a basic three.js scene with a rotating mesh and a simple animation clip, then play it with a mixer to see continuous motion.

Frequently Asked Questions about threejs-animation

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

FAQPage Schema
How do I play multiple three.js animations from a GLTF model simultaneously?▼

Blend three.js animations by initializing AnimationMixer, extracting clips via GLTFLoader, and adjusting AnimationAction weights to cross-fade between skeletal and keyframe animations during runtime playback.

What is the best way to create facial expressions in three.js using morph targets?▼

Animate three.js facial expressions by defining morph target weights and interpolating them through AnimationClip keyframes, enabling blend shape transitions on GLTF-loaded meshes at runtime.

How does AnimationMixer work with AnimationClip for skeletal bone manipulation?▼

AnimationMixer processes AnimationClip keyframes to interpolate bone rotations and translations across skeletal hierarchies, updating rigged mesh poses dynamically during the render loop.

Can I use GLTFLoader to extract and control keyframe animation clips at runtime?▼

Yes, GLTFLoader extracts embedded animation clips, which are passed to AnimationMixer to instantiate AnimationAction objects for runtime playback control of keyframe and skeletal animations.

Does three.js animation blending support both skeletal rigs and morph targets in one scene?▼

Yes, AnimationMixer coordinates both skeletal bone hierarchy transformations and morph target weight changes simultaneously, blending diverse animation clips within a single GLTF-enabled three.js scene.

Why does my three.js animation clip not play continuously during the render loop?▼

A three.js animation clip stops playing if AnimationMixer.update(deltaTime) is omitted from the render loop, halting the time-based interpolation of keyframes and skeletal bone transformations.

Related Skills

Explore More Software Engineering Skills→
MonichreMonichre

threejs-animation

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

Community
Intermediate
SithaboSithabo
1

threejs-animation

Implement and orchestrate Three.js keyframe, skeletal, and morph target animations.

Community
Advanced
nicolasieber-tmnicolasieber-tm

threejs-animation

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

Community
Advanced
gyalamanch001agyalamanch001a

threejs-animation

Create and control Three.js animations using AnimationMixer, AnimationAction, AnimationClip, GLTFLoader, and per-frame updates.

Community
Advanced