skills.rest
brunoolf
brunoolfCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Implements Three.js keyframe, skeletal, morph target, and blended animation systems.

Updated Aug 12, 2026
Search Tags:#animation#webgl#three.js#gltf#skeletal animation#morph targets#animation blending
One-click install
npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-animation-brunoolf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/brunoolf/frontend-craft/tree/main/skills/threejs-animation
Command: npx skills add https://github.com/brunoolf/frontend-craft --skill threejs-animation-brunoolf

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-loaded skeletal rigs and morph targets, which is error-prone without a clear reference. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - Skeletal & GLTF Animation: Load GLTF animations, play clips by name, manipulate bones programmatically, and attach objects to bones. - Animation Blending: Crossfade between actions, blend idle/walk/run by weight, and apply additive blending for layered motion. - Use Case: Build a character controller that crossfades from idle to walk to run based on movement speed, with a procedurally animated head bone tracking the camera. ## Quick Start Ask the AI to load a GLTF model and play its walk animation with a crossfade to idle when the character stops moving.

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(clip).play() with a clip from gltf.animations. Call mixer.update(delta) every frame in the animation loop.

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

Use action.crossFadeTo(otherAction, 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 morph target animation?▼

Yes. Set mesh.morphTargetInfluences by index or via morphTargetDictionary names, or animate them with a NumberKeyframeTrack targeting .morphTargetInfluences[name] inside an AnimationClip.

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the requestAnimationFrame loop. Also verify the clip name exists in gltf.animations and that the action was created with mixer.clipAction and started with play().

How do I attach an object to a bone in Three.js?▼

Find the bone in the SkinnedMesh skeleton by name, then call bone.add(object) so the object follows the bone's transforms. Adjust the child's local position and rotation to offset the attachment.

Related Skills

Explore More Software Engineering Skills→
EntelligentsiaEntelligentsia
1

threejs-animation

Automate Three.js animation workflows for GLTF models with AnimationClip and AnimationMixer.

Official
Advanced
hanzoaihanzoai

threejs-fundamentals

Create a minimal Three.js scene with rotating cube, lighting, and animation loop for web browsers.

Official
Intermediate
tommy771004tommy771004

threejs-animation

Orchestrate Three.js keyframe clips, mixer playback, and action blending.

Community
Intermediate
hanzoaihanzoai

threejs-animation

Create and blend Three.js animation clips for keyframes, skeletal rigs, and morph targets.

Official
Intermediate