skills.rest
basabecode
basabecodeCOMMUNITY
Explore all skills by this author →
GitHub

threejs-animation

Orchestrate complex Three.js animations including keyframe, skeletal, morph-target blending with GLTF assets.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Three.js animation workflows are complex and error-prone; this guide consolidates keyframe, skeletal, morph-target, and blending techniques to help developers build dynamic 3D scenes with confidence.

Core Features & Use Cases

  • Keyframe animation: define time-based transforms for precise motion.
  • Skeletal animation: drive bones and rigged models with AnimationMixer.
  • Morph targets & blending: blend facial expressions and morphable geometry.
  • GLTF integration: play and blend animations contained in GLTF assets.
  • Procedural motion: implement runtime motion via code for responsive visuals.

Quick Start

Create a basic Three.js scene with a mesh and an AnimationMixer, then update the mixer inside the render loop to drive the animation.

Frequently Asked Questions about threejs-animation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I blend skeletal and morph-target animations in Three.js?▼

Blending skeletal and morph-target animations in Three.js requires using AnimationMixer and AnimationAction to synchronize multiple AnimationClip tracks, enabling smooth transitions between bone movements and facial expressions.

How do I play GLTF animations in Three.js using AnimationMixer?▼

Playing GLTF animations in Three.js involves loading the asset, passing its embedded AnimationClip data to an AnimationMixer, creating an AnimationAction, and updating the mixer inside the render loop using a clock.

What is the best way to synchronize multiple AnimationAction clips in a WebGL scene?▼

Synchronizing multiple AnimationAction clips in a WebGL scene is best achieved by updating a single AnimationMixer instance with a shared clock delta during the render loop, ensuring all keyframe and procedural motions stay aligned.

Can I create procedural motion alongside keyframe animations in Three.js?▼

You can create procedural motion alongside keyframe animations in Three.js by updating object transforms via code while simultaneously advancing the AnimationMixer, allowing runtime responsive visuals blended with predefined clips.

Why does my Three.js keyframe animation freeze during the render loop?▼

Three.js keyframe animations freeze during the render loop when the AnimationMixer is not updated; you must call the mixer's update method with the elapsed time from a clock every frame to drive playback.

Do I need rigged models to use AnimationMixer for Three.js web scenes?▼

You do not need rigged models to use AnimationMixer for Three.js web scenes; it also drives keyframe transforms on standard meshes and morph-target geometry without requiring skeletal bones.

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
6

threejs-scene-builder

Build Three.js scenes with camera, renderer, controls, and lighting.

Community
Advanced
StonelukasStonelukas

threejs

Create interactive 3D web apps with Three.js for WebGL/WebGPU rendering.

Community
Advanced
alexzhang1030alexzhang1030

threejs-animation

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

Community
Intermediate
47thtechcorner47thtechcorner
21

threejs-animation

Implement 3D animation sequences and procedural motion patterns in Three.js.

Community
Advanced