skills.rest
zamansepeti43
zamansepeti43COMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

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

Updated Sep 1, 2026
Search Tags:#animation#webgl#three.js#keyframe#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-animation-zamansepeti43
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/zamansepeti43/c-rak-agent/tree/main/video-engine/.agents/skills/threejs-animation
Command: npx skills add https://github.com/zamansepeti43/c-rak-agent --skill threejs-animation-zamansepeti43

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: A developer loads a character GLB with Walk and Idle clips, then crossfades between them based on player speed while procedurally rotating the head bone to track the camera. ## Quick Start Ask the AI to load a GLTF model, play its Walk animation with an AnimationMixer, and crossfade to an Idle clip 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 with a clip from gltf.animations and play it. Call mixer.update(delta) every frame in the animation loop.

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

Create an AnimationAction for each clip, play both, and adjust weights with setEffectiveWeight, or use action1.crossFadeTo(action2, duration, true) for a timed transition. Additive blending is available via AdditiveAnimationBlendMode.

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.

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the render loop, since actions only advance when the mixer updates. Also verify the clip name exists with AnimationClip.findByName and that the action's weight is not zero.

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. For keyframed control, create a NumberKeyframeTrack targeting .morphTargetInfluences[name] and play it through a mixer.

Related Skills

Explore More Software Engineering Skills→
huangzidahuangzida
2

threejs-animation

Automate three.js animation workflows for GLTF-enabled scenes.

Community
Advanced
radical-beardradical-beard

animation-system

Manage skeletal animations, blending, IK, sockets, and ragdoll physics in Bestow.

Community
Advanced
CarlosDoersCarlosDoers

threejs-shaders

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

Community
Intermediate
ewertonxyzewertonxyz

k-spec-animation

Optimize character locomotion and animation in Unreal Engine 5.8.

Community
Advanced