skills.rest
Aadi-110i
Aadi-110iCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-animation

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

Updated Jul 28, 2026
Search Tags:#animation#webgl#three.js#keyframe#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-animation-aadi-110i
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/Aadi-110i/PEP-PROJECT/tree/main/skills/threejs-animation
Command: npx skills add https://github.com/Aadi-110i/PEP-PROJECT --skill threejs-animation-aadi-110i

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 when blending skeletal animations, morph targets, or procedural motion without clear guidance. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - Skeletal & GLTF Animation: Load GLTF animations, control bones programmatically, attach objects to bones, and play clips through an AnimationMixer. - Animation Blending & Morph Targets: Crossfade between actions, blend idle/walk/run states by weight, apply additive blending, and animate morph target influences. - Use Case: When building a character controller, use this Skill to load a GLTF model, play its Walk clip, and crossfade to Run based on movement speed. ## Quick Start Ask the AI to load a GLTF model and play its walk animation with a crossfade to a run animation using 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 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?▼

Use action.crossFadeTo(targetAction, duration, true) to transition between clips, or set effective weights on multiple playing actions. Weight-based blending works well for speed-driven idle, walk, and run states.

Does Three.js support morph target animation?▼

Yes, meshes expose morphTargetInfluences and morphTargetDictionary for direct weight control. You can also animate influences 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 render loop each frame. Also verify the action was started with play() and that the clip name matches when using AnimationClip.findByName.

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

Find the bone by name in the SkinnedMesh skeleton and call bone.add(object) to parent it. Adjust the child's local position and rotation to offset the attachment 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
Prompt-or-Die-LabsPrompt-or-Die-Labs
7

threejs-scene-builder

Generates Three.js and React Three Fiber scenes with GLTF loading, animation, and lighting.

Official
Advanced
capella-hotel-groupcapella-hotel-group

threejs-shaders

Write custom GLSL shaders and ShaderMaterial effects for Three.js scenes.

Official
Intermediate
nachopalmerinachopalmeri

css-animations

Provide ready-to-use CSS 2D animation patterns for websites.

Community
Intermediate