skills.rest
mmdonohue
mmdonohueCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Creates and controls animated models with the Unreal Engine.

1|Updated Apr 7, 2025
Search Tags:#animation#webgl#threejs#glTF#morph-targets#skeletal-animation#animation-mixer
One-click install
npx skills add https://github.com/mmdonohue/zuzu --skill threejs-animation-mmdonohue
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/mmdonohue/zuzu/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/mmdonohue/zuzu --skill threejs-animation-mmdonohue

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building rich, interactive 3D animations in web applications requires coordinating multiple Three.js components and data formats. This skill provides a practical guide to orchestrating keyframe, skeletal, and morph-target animations, plus blending and loading GLTF assets.

Core Features & Use Cases

  • Animation architecture: use AnimationClip, AnimationMixer, and AnimationAction to drive playback.
  • Asset integration: load GLTF models with animations and apply bone and morph-target animations.
  • Procedural control: implement runtime animation logic, bone attachments, and blending for responsive UI elements or games.

Quick Start

Install Three.js in your project, import the library, set up a scene, load a GLTF model, create an AnimationMixer, and run a render loop that updates the mixer each frame to drive animations.

Frequently Asked Questions about threejs-animation

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

FAQPage Schema
How do I load and play skeletal animation from a glTF model in Three.js?▼

To play skeletal animation in Three.js, load the glTF model, instantiate an AnimationMixer, and update the mixer each frame in the render loop to drive bone manipulation and playback.

What is the best way to blend multiple Three.js animations at runtime?▼

The best way to blend Three.js animations is using AnimationAction to control playback and apply runtime logic, enabling smooth transitions between keyframe, skeletal, and morph-target animations.

How does AnimationMixer work with AnimationClip and AnimationAction in Three.js?▼

AnimationMixer works in Three.js by scheduling AnimationClip data through AnimationAction instances, coordinating keyframe, skeletal, and morph-target animations to drive complex 3D scene playback.

Can I use Three.js morph targets for interactive web scene animations?▼

Yes, you can use Three.js morph targets for interactive web scenes by loading glTF assets and controlling morph-target animations via AnimationMixer and AnimationAction within the render loop.

How to set up a Three.js render loop to update 3D animations?▼

To set up a Three.js render loop, import the library, create a scene, load a glTF model, initialize an AnimationMixer, and call the mixer update method each frame to drive animations.

Related Skills

Explore More Software Engineering Skills→
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
sbalagan22sbalagan22

threejs-animation

Implement Three.js animations with keyframes, skeletal rigs, morph targets, and blending.

Community
Advanced
guaderramaguaderrama

threejs-webgl

Create 3D scenes with Three.js for WebGL and WebGPU rendering.

Community
Advanced
Thanh-aperoThanh-apero
1

threejs

Create and render interactive 3D scenes with Three.js using WebGL and WebGPU.

Community
Advanced