skills.rest
divinaarmuela
divinaarmuelaCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Implements keyframe, skeletal, morph target, and blended animations in Three.js scenes.

Updated Apr 19, 2026
Search Tags:#animation#webgl#three.js#keyframe#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/divinaarmuela/Content --skill threejs-animation-divinaarmuela
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/divinaarmuela/Content/tree/main/.claude/skills/threejs-animation
Command: npx skills add https://github.com/divinaarmuela/Content --skill threejs-animation-divinaarmuela

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Animating 3D objects in Three.js requires coordinating AnimationClips, AnimationMixers, and AnimationActions, plus handling GLTF skeletal data and morph targets, which is error-prone without a structured reference. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - GLTF & Skeletal Animation: Load animations from GLTF models, control bones programmatically, and attach objects to skeleton bones. - Blending & Morph Targets: Crossfade between actions, blend idle/walk/run by weight, use additive blending, and animate morph target influences. - Use Case: Load a character GLB, play its Walk clip through an AnimationMixer, then crossfade to Run and procedurally rotate the head bone to track the camera. ## Quick Start Ask the AI to load a GLTF model and play its built-in walk animation using an AnimationMixer updated in the render loop.

Frequently Asked Questions about threejs-animation

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

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

Load the model with GLTFLoader, create an AnimationMixer on gltf.scene, then call mixer.clipAction with a clip from gltf.animations and play it. Call mixer.update(delta) every frame in the render loop.

How to blend between two animations in Three.js?▼

Use action.crossFadeTo(targetAction, duration, true) to transition between clips, or set effective weights on multiple playing actions to mix them continuously, such as blending idle, walk, and run by speed.

Does Three.js support skeletal animation and bone control?▼

Yes. SkinnedMesh objects expose a skeleton whose bones can be rotated or positioned programmatically, and objects can be attached directly to bones. SkeletonHelper visualizes the bone hierarchy for debugging.

How do I animate morph targets in Three.js?▼

Set values in mesh.morphTargetInfluences by index or look up names via morphTargetDictionary. You can animate them procedurally per frame or with a NumberKeyframeTrack targeting .morphTargetInfluences[name].

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the animation loop. Also verify the action was started with play(), the clip name exists in gltf.animations, and the mixer targets the correct root object.

Related Skills

Explore More Software Engineering Skills→
tadams95tadams95
1

threejs-animation

Manage Three.js animation clips, mixers, and actions with GLTFLoader.

Community
Intermediate
fal-ai-communityfal-ai-community
224

fal-regenerate-3d

Generate interactive 3D character selectors with Three.js scenes.

Official
Advanced
mitgar14mitgar14

threejs-animation

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

Community
Intermediate
xingBaGanxingBaGan

gsap-core

Animate CSS properties on DOM elements with GSAP tweens and easing.

Community
Advanced