skills.rest
yogaprasetya22
yogaprasetya22COMMUNITY
Explore all skills by this author →
WebsiteGitHub

threejs-animation

Plays and blends keyframe, skeletal, and morph-target animations in Three.js.

Updated May 18, 2026
Search Tags:#animation#threejs#blending#gltf#skeletal animation#morph targets#animationmixer
One-click install
npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-animation-yogaprasetya22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/yogaprasetya22/mmorpg/tree/main/frontend/.agents/skills/threejs-animation
Command: npx skills add https://github.com/yogaprasetya22/mmorpg --skill threejs-animation-yogaprasetya22

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the problem of bringing 3D objects to life by defining, playing, and blending keyframe, skeletal, and morph-target animations in Three.js.

Core Features & Use Cases

  • AnimationClip authoring: Create and configure keyframe tracks for positions, rotations, scales, visibility, colors, and morph target influences.
  • Playback with AnimationMixer/Action: Play GLTF-provided animations, control timing, loop modes, weights, fades, and crossfades for smooth transitions.
  • Skeletal and morph workflows: Drive bone transformations programmatically and blend morph targets for expressive characters and faces.

Quick Start

Load an animated GLTF model, create an AnimationMixer, pick a clip by name, and play it while updating the mixer each frame using the render loop delta time.

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?▼

To play GLTF animations in Three.js, load the model, create an AnimationMixer, select an AnimationClip by name, and call AnimationAction.play() while updating the mixer with the delta time each frame.

How do I blend between idle, walk, and run animations in Three.js?▼

Blending animations in Three.js is done by adjusting AnimationAction weights and applying crossfades or fades to transition smoothly between state-based clips like idle, walk, and run.

How does AnimationMixer.update work for skeletal animation?▼

AnimationMixer.update advances the timeline for skeletal animation by taking the frame delta time, interpolating keyframe tracks, and applying the calculated bone transformations to the model.

What is the best way to animate morph targets in Three.js?▼

Animating morph targets in Three.js involves creating keyframe tracks for morph target influences and playing them through the AnimationMixer to achieve expressive facial or character deformations.

Can I create custom keyframe animations without a GLTF file in Three.js?▼

Yes, you can author custom AnimationClips in Three.js by defining keyframe tracks for positions, rotations, scales, colors, and visibility, then playing them with an AnimationMixer.

Why are my Three.js animation transitions snapping instead of fading smoothly?▼

Snapping transitions occur when AnimationAction crossfades or fades are not configured correctly; ensure you set proper durations and weights when blending clips in the AnimationMixer.

Related Skills

Explore More Software Engineering Skills→
OpenAEC-FoundationOpenAEC-Foundation
11

threejs-impl-animation

Manage Three.js animation clips from GLTF assets with AnimationMixer.

Official
Intermediate
alexzhang1030alexzhang1030

threejs-animation

Create and control Three.js animations with AnimationMixer and AnimationAction.

Community
Intermediate
fanguyunfanguyun

threejs-animation

Manage keyframe, skeletal, and morph target animations in Three.js.

Community
Intermediate
MonichreMonichre

threejs-animation

Implement Three.js keyframe, skeletal, and morph target animations with AnimationMixer.

Community
Intermediate