skills.rest
imanlangaran
imanlangaranCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

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

1|Updated Aug 20, 2023
Search Tags:#javascript#animation#webgl#three.js#gltf#skeletal animation#morph targets
One-click install
npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-animation-imanlangaran
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/imanlangaran/mini-projects/tree/main/building-sell/.claude/skills/threejs-animation
Command: npx skills add https://github.com/imanlangaran/mini-projects --skill threejs-animation-imanlangaran

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 playback control, blending, and GLTF animation loading. ## Core Features & Use Cases - Keyframe Animation: Create NumberKeyframeTrack, VectorKeyframeTrack, QuaternionKeyframeTrack, and ColorKeyframeTrack clips with configurable interpolation modes. - Skeletal & Morph Animation: Play GLTF animations via AnimationMixer, manipulate bones programmatically, attach objects to bones, and drive morph target influences. - Animation Blending: Crossfade between actions, blend idle/walk/run by weight, and apply additive blending layers. - Use Case: Load a GLTF character model, play its Walk clip, then crossfade to Run based on movement speed while procedurally rotating the head bone. ## Quick Start Use the threejs-animation skill to load a GLTF model and play its built-in animations with an 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. 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. For locomotion, adjust idle, walk, and run weights based on movement speed.

Does Three.js support skeletal bone animation?▼

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

Why is my Three.js animation not playing?▼

The most common cause is forgetting to call mixer.update(delta) inside the render loop. Also verify the clip name exists via 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 names via morphTargetDictionary. For keyframed control, create a NumberKeyframeTrack targeting .morphTargetInfluences[name] and play it through a mixer.

Related Skills

Explore More Software Engineering Skills→
cvenwucvenwu

three

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

Community
Advanced
vuminhieuvuminhieu

threejs

Creates interactive 3D web scenes with Three.js including cameras, lights, materials, GLTF/OBJ loaders, animation, and WebXR support.

Community
Intermediate
ftnilssonftnilsson

12 — Shaders & Visual Effects

Create and customize shaders and visual effects in Unity using Shader Graph and HLSL.

Community
Advanced
ayofemiadeayofemiade

animated-component-libraries

Implements pre-built animated React components from Magic UI and React Bits libraries.

Community
Intermediate