skills.rest
capella-hotel-group
capella-hotel-groupOFFICIAL
Explore all skills by this author →
GitHub

threejs-animation

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Animating 3D objects in Three.js requires coordinating AnimationClips, AnimationMixers, and AnimationActions, and developers often struggle with GLTF animation playback, bone manipulation, and smooth transitions between animation states. ## Core Features & Use Cases - Keyframe Animation: Create AnimationClips with Number, Vector, Quaternion, Color, Boolean, and String keyframe tracks with configurable interpolation modes. - GLTF & Skeletal Animation: Load animations from GLTF models, control bones programmatically, and attach objects to skeleton bones. - Animation Blending: Crossfade between actions, blend by weight based on parameters like speed, and apply additive blending layers. - Use Case: Build a character controller that blends idle, walk, and run animations based on movement speed, with smooth crossfades and a breathing additive layer. ## Quick Start Show me how to load a GLTF model and play its walk animation with a Three.js AnimationMixer.

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. You must call mixer.update(delta) every frame in the animation loop for playback to advance.

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

Use action.crossFadeTo(otherAction, duration, true) to smoothly transition between clips, or set effective weights on multiple playing actions to blend them continuously, such as mixing idle, walk, and run based on character speed.

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 via THREE.AnimationClip.findByName and that the action was started with play().

Does Three.js support morph target animation?▼

Yes, meshes expose morphTargetInfluences and morphTargetDictionary for direct weight control. You can also animate morphs with NumberKeyframeTrack targeting paths like .morphTargetInfluences[smile] inside an AnimationClip.

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

Find the bone in the SkinnedMesh skeleton by name with skeleton.bones.find(), then add the object as a child of that bone. Adjust the child's local position and rotation to offset it relative to the bone.

Related Skills

Explore More Software Engineering Skills→
cvenwucvenwu

three

Synchronize Three.js scenes with HyperFrames seek events for deterministic renders.

Community
Advanced
fal-ai-communityfal-ai-community
224

fal-regenerate-3d

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

Official
Advanced
CarlosDoersCarlosDoers

threejs-shaders

Integrate custom GLSL shaders into Three.js scenes via ShaderMaterial or RawShaderMaterial.

Community
Intermediate
Nice-Wolf-StudioNice-Wolf-Studio
24

unity-animation

Guide Unity Mecanim animation workflows, including Animator Controllers, state machines, and blend trees.

Official
Intermediate