skills.rest
dogmandcl
dogmandclCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Implement Three.js keyframe, skeletal, and morph-target animation workflows.

Updated Mar 25, 2026
Search Tags:#graphics#animation#webgl#threejs#skeletal#morph-targets#gltf
One-click install
npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-animation-dogmandcl
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/dogmandcl/Claude-Threejs-Skills/tree/main/skills/threejs-animation
Command: npx skills add https://github.com/dogmandcl/Claude-Threejs-Skills --skill threejs-animation-dogmandcl

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a structured guide to implementing and understanding Three.js animation workflows, including keyframe animation, skeletal animation, and morph target blending.

Core Features & Use Cases

  • Keyframe animation: Timeline-driven motion for objects and materials.
  • Skeletal animation: Setup and playback of bone-driven rigs and GLTF-sourced animations.
  • Morph targets and blending: Manage shape keys and mix multiple clips for smooth transitions.

Quick Start

Create a simple animated scene by rotating a mesh and playing a basic animation clip using a mixer.

Frequently Asked Questions about threejs-animation

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

FAQPage Schema
How do I play Three.js skeletal animations loaded from a GLTF file?▼

To play Three.js skeletal animations from a GLTF file, use AnimationMixer to manage clips and AnimationAction to control playback of the bone-driven rigs imported from the model.

What is the best way to blend multiple Three.js animation clips together?▼

The best way to blend multiple Three.js animation clips is using AnimationAction to apply morph targets and mix keyframe animations, ensuring smooth transitions between different character movements.

How does a Three.js AnimationMixer work with keyframe animation?▼

A Three.js AnimationMixer works by acting as a player for AnimationClip data, scheduling and updating timeline-driven keyframe animation for objects and materials on a per-frame basis.

Can I use morph targets in Three.js for character facial expressions?▼

Yes, you can use morph targets in Three.js for character facial expressions by managing shape keys and blending multiple clips to achieve smooth facial transitions.

Why does my Three.js animation clip not play in my interactive 3D scene?▼

Your Three.js animation clip may not play because the AnimationMixer is not being updated in your render loop, which is required to advance the timeline of the AnimationAction.

Related Skills

Explore More Software Engineering Skills→
CloudAI-XCloudAI-X
2.9k

threejs-animation

Animate 3D objects and characters using Three.js AnimationMixer and AnimationClip.

Community
Intermediate
freshtechbrofreshtechbro
682

playcanvas-engine

Develop interactive 3D web applications with the PlayCanvas engine.

Community
Advanced
daffy0208daffy0208
34

3d-visualizer

Create interactive Three.js and React Three Fiber 3D visualizations with lighting and camera controls.

Community
Intermediate
Thanh-aperoThanh-apero
1

ck:shader

Develop custom GLSL fragment shaders for procedural graphics in WebGL and Three.js.

Community
Advanced