Works with the AI Agents you already use
Claude Code
Cursor
Codex CLI
Muse
Dots+22 moreClaude CodeCursorCodex CLIMuseDots
OpenClaw
Manus
Grok
Grok Bot+18 agentsThree.js Motion Orchestration
Play, blend, and optimize Three.js animations — GLB clips, skeletal rigs, morphs, and procedural motion — without the usual mixer pitfalls.
Free
Three.js Motion Orchestration
Example session with this skill installed
My character.glb has Idle, Walk, and Run clips loaded in scene.js, but the model just sits frozen at frame zero and the console throws nothing. Later I also want a subtle breathing layer over the walk and a camera that damp-follows the character. Can you diagnose the mixer setup, get the clips actually playing, wire a speed-based blend where walk and run crossfade instead of snapping, add the additive breathe layer, and make sure I'm not paying for animation updates on characters that are off screen? Please patch the existing files, don't rewrite my scene.
- Read your context and instructions
- Compiled the three js motion
Summary
Diagnosed the frozen character in scene.js: the mixer was created but never updated in the render loop, and clip lookup used array indexes that didn't match the export order. Rebuilt playback around a named action registry, a weight-based idle/walk/run blend with crossfades, an additive Breathe layer, and off-screen pausing.
| Metric | Before | After |
|---|---|---|
| mixer.update(dt) calls per frame | 0 (frozen) | 1 shared root mixer |
| Idle to Walk transition | hard pop | 0.35s crossFadeTo |
| Clip lookup | animations[1], [2] guesswork | findByName + Map registry |
| Breathing | none | AdditiveAnimationBlendMode layer |
| Off-screen rigs | still animating | paused via visibility gate |
| Avg frame time (6 characters) | 14.8 ms | 11.1 ms |
const registry = Object.fromEntries(clips.map(c => [c.name, mixer.clipAction(c)]));
function blend(speed) {
const w = THREE.MathUtils.clamp(speed / 5, 0, 1);
registry.Idle.setEffectiveWeight(1 - w);
registry.Walk.setEffectiveWeight(w);
}
Next steps
- Extract a clean 24-frame walk cycle with AnimationUtils.subclip and call optimize() once at load
- Set clampWhenFinished on one-shot clips so they don't snap back to rest
- Move facial morph weights into a small expression controller instead of scattering them per-system
Connects securely to your tools. The creator never sees your data.
About this skill
Broken animation loops, jittery transitions, and silent keyframe failures stall most Three.js projects. This skill provides the precise logic for managing the Three.js animation system, covering everything from basic GLB clip playback to complex additive blending and procedural spring motion.
What it does
- Clip management Plays, pauses, and syncs
THREE.AnimationClipdata using the mixer. - State blending Handles smooth crossfades between locomotion states like idle, walk, and run.
- Skeletal control Drives bone hierarchies directly or attaches props to specific rig points.
- Morph targets Animates mesh deformations and facial expressions using weight dictionaries.
- Procedural motion Implements spring physics, critical damping, and mathematical oscillators.
- Asset optimization Trims and compresses dense keyframe data to reduce memory overhead.
How it works
- Initialize Create a
THREE.AnimationMixertargeting your root object or GLTF scene. - Configure Define
THREE.AnimationActionparameters for looping, time scales, and weights. - Execute Update the mixer within your main requestAnimationFrame loop using delta time.
- Extend Layer additive clips or procedural bone rotations on top of existing authored animations.
Frameworks & tools
Built for Three.js. Compatible with GLTFLoader, skeleton rigs, and morph target systems.
Why this beats prompting it yourself
Standard LLMs often forget to update the mixer, mangle quaternion arrays, or fail to handle the hierarchy mismatches common in GLTF imports. This skill enforces correct track paths and provides boilerplate for the tricky math behind springs and dampers.
Use cases
- Character controllers Building state machines for third-person player movement.
- UI transitions Creating spring-based 3D button interactions and hover effects.
- Facial animation Syncing lip-sync morphs or eye-blinks with procedural noise.
- Data visualization Animating graph nodes or complex mechanical assemblies.
Known limitations
Does not include a full physics engine integration like Cannon.js or Rapier. Requires a basic understanding of the Three.js render loop.
How to use
Skills on Agensi run inside your AI agent. Copy the prompt, paste it into your agent, and it connects to Agensi and installs this skill for you. If a payment is needed, your agent shows it to you first.
Reviews
No reviews yet
Be one of the first to try it. Every listed skill passes our trust checks below.
Security scanned
Passed our 8-point scan before listing
2 installs
Downloaded by developers to date
Free forever
No account required to browse
Trust & safety
Security scanned
Verified clean 16 days ago
- Free to download with an account