skills.rest
kodingvibes
kodingvibesOFFICIAL
Explore all skills by this author →
WebsiteGitHub

threejs-animation

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

2|10|Updated Jul 28, 2026
Search Tags:#animation#webgl#three.js#glTF#keyframe#skeletal animation#morph targets
One-click install
npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-animation-kodingvibes
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/kodingvibes/gamejam-2026/tree/main/participantes/madkoding/.agents/skills/threejs-animation
Command: npx skills add https://github.com/kodingvibes/gamejam-2026 --skill threejs-animation-kodingvibes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires three.

What problem does it solve? Animating 3D objects in Three.js requires coordinating AnimationClips, AnimationMixers, and AnimationActions, which is error-prone without clear patterns for keyframes, skeletal rigs, morph targets, and blending. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - GLTF & Skeletal Animation: Load GLTF animations, control bones programmatically, attach objects to bones, and visualize rigs with SkeletonHelper. - Animation Blending & Morph Targets: Crossfade between actions, blend idle/walk/run by weight, use additive blending, and animate morph target influences. - Use Case: A game developer loads a GLB character, plays its Walk clip through an AnimationMixer, crossfades to Run based on movement speed, and procedurally rotates the head bone to track the player. ## Quick Start Ask the AI to load a GLTF model in Three.js, play its walk animation with an AnimationMixer, and crossfade to a run animation when the character speeds up.

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 using THREE.Clock to advance playback.

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

Use action.crossFadeTo(otherAction, duration, true) to transition between clips, or play multiple actions simultaneously and adjust each action's effective weight. Additive blending is available via THREE.AdditiveAnimationBlendMode and AnimationUtils.makeClipAdditive.

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

Yes, SkinnedMesh objects expose a skeleton whose bones can be rotated or positioned programmatically. You can also attach meshes to bones and visualize the rig with THREE.SkeletonHelper.

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

Set values in mesh.morphTargetInfluences by index, or look up indices via mesh.morphTargetDictionary by name. 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 clip name exists in gltf.animations and that the action's weight is not zero.

Related Skills

Explore More Software Engineering Skills→
norrbackanorrbacka

threejs-loaders

Load GLTF, GLB, textures, HDR, and EXR assets in Three.js.

Community
Advanced
ollieb89ollieb89

3d-games

Teach foundational 3D game development principles across rendering pipelines, shaders, physics, and camera systems.

Community
Intermediate
video-production-buddyvideo-production-buddy
602

threejs-animation

Implement Three.js 3D animation workflows with skeletal, morph, and crossfade blending.

Official
Intermediate
sbalagan22sbalagan22

r3f-animation

Animate 3D objects in React Three Fiber with useFrame and useAnimations.

Community
Advanced