skills.rest
tommy771004
tommy771004COMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Orchestrate Three.js keyframe clips, mixer playback, and action blending.

Updated Aug 27, 2026
Search Tags:#threejs#keyframe#gltf#skeletal animation#morph targets#animation blending#animation mixer
One-click install
npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill threejs-animation-tommy771004
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/tommy771004/StockAnalyzeAIConnectV2/tree/main/skills/threejs-animation
Command: npx skills add https://github.com/tommy771004/StockAnalyzeAIConnectV2 --skill threejs-animation-tommy771004

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you implement smooth, correct animation playback in Three.js, including keyframe clips, skeletal motion, morph targets, and reliable animation blending.

Core Features & Use Cases

  • Keyframe Animation Clips: Create AnimationClip instances with keyframe tracks for position, rotation (quaternion), color, visibility, and morph influence tracks.
  • Animation Playback Control: Use AnimationMixer and AnimationAction to play, pause, loop, fade in/out, crossfade, and fine-tune playback time and speed.
  • Blending & Procedural Motion: Mix multiple clips (including additive layers) and combine authored animations with procedural/spring/sine-driven motion for dynamic effects.
  • Use Case: Animate a loaded GLTF character by playing “Walk” and smoothly crossfading to “Idle” while also adding a subtle breathing additive animation.

Quick Start

Ask the AI to generate a Three.js animation setup that creates an AnimationMixer, plays a named GLTF animation clip, updates the mixer in the render loop, and crossfades to another clip when a state changes.

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 animation clips in Three.js?▼

To play GLTF animation clips in Three.js, use an AnimationMixer and AnimationAction to load named clips, then update the mixer each frame in the render loop to play, pause, or loop the animation.

Can I crossfade between multiple Three.js animations with different weights?▼

Yes, you can crossfade multiple Three.js animations by controlling AnimationAction weights and fade durations, smoothly blending clips like transitioning a character from Walk to Idle.

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

Animating bones and morph targets in Three.js requires defining KeyframeTrack instances for skeletal motion and morph influences, then orchestrating them within an AnimationClip for playback.

How does animation blending work with additive layers in Three.js?▼

Animation blending with additive layers in Three.js mixes base clips with overlay animations, combining authored motion with procedural effects like sine-driven breathing for dynamic character results.

Do I need to update the AnimationMixer every frame for Three.js animation playback?▼

Yes, you must update the AnimationMixer every frame in the render loop for Three.js animation playback, passing the delta time to advance keyframe tracks and maintain smooth mixer playback.

Related Skills

Explore More Software Engineering Skills→
mitgar14mitgar14

threejs-animation

Animate Three.js objects, clips, and rigs in real time.

Community
Intermediate
jtgironjtgiron

threejs-animation

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

Community
Advanced
nicolasieber-tmnicolasieber-tm

threejs-materials

Configure Three.js materials with PBR, textures, and shader integration.

Community
Intermediate
MonichreMonichre

threejs-animation

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

Community
Intermediate