skills.rest
efekrbas
efekrbasCOMMUNITY
Explore all skills by this author →
Website𝕏@efekrbsGitHub

threejs-animation

Design and control Three.js animations with keyframe tracks, GLTF playback, and blending.

41|5|Updated Sep 30, 2025
Search Tags:#animation#three.js#keyframes#gltf#mixer#skeletal animation#morph targets
One-click install
npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill threejs-animation-efekrbas
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: threejs-animation
Source: https://github.com/efekrbas/discord-hypesquad-manager/tree/main/.agents/skills/threejs-animation
Command: npx skills add https://github.com/efekrbas/discord-hypesquad-manager --skill threejs-animation-efekrbas

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you build and control motion in Three.js scenes without manually stitching together animation logic, timing, and playback behavior.

Core Features & Use Cases

  • Animation Playback: Run imported GLTF clips with mixers and actions for characters, props, and environment objects.
  • Keyframe and Procedural Motion: Create keyframe tracks, oscillation, spring motion, and smooth interpolation for custom scene behavior.
  • Blending and Transitions: Crossfade, fade, loop, and layer animations for idle, walk, run, and additive effects.
  • Use Case: You can animate a skinned model so it idles, walks, and turns smoothly while blending between clips and reacting to speed changes.

Quick Start

Ask the assistant to implement a Three.js animation workflow for my scene, including mixers, clips, blending, or procedural motion as needed.

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 with smooth transitions?▼

Play GLTF animations in Three.js using AnimationMixer and AnimationAction to control clips, enabling smooth crossfades, loops, and blending between imported character motions.

What is the best way to blend idle and walk animations for a Three.js character?▼

Blend idle and walk animations in Three.js using AnimationAction methods for crossfading and layering, allowing smooth transitions and additive effects that react to speed changes.

How do I create custom keyframe tracks for Three.js objects?▼

Create custom keyframe tracks in Three.js by defining VectorKeyframeTrack or NumberKeyframeTrack data, selecting interpolation modes, and updating them inside the render loop.

Can I use skeletal animation and morph targets together in a Three.js scene?▼

Three.js supports both skeletal animation and morph targets within the same scene, managing skinned rigs and facial blends simultaneously through a unified AnimationMixer update cycle.

Why does my Three.js animation mixer not update during the render loop?▼

Three.js animation mixers fail to update if AnimationMixer.update(delta) is omitted from the render loop, halting clip progression, interpolation, and action blending playback.

Related Skills

Explore More Software Engineering Skills→
nicolasieber-tmnicolasieber-tm

threejs-animation

Animate Three.js scenes with keyframes, skeletal rigs, and morph targets.

Community
Advanced
47thtechcorner47thtechcorner
21

canvas-procedural-animation

Generate procedural character motion and environmental effects with p5.js on HTML5 Canvas.

Community
Intermediate
daffy0208daffy0208
34

3d-visualizer

Create interactive Three.js and React Three Fiber 3D visualizations with lighting and camera controls.

Community
Intermediate
gyalamanch001agyalamanch001a

threejs-animation

Create and control Three.js animations using AnimationMixer, AnimationAction, AnimationClip, GLTFLoader, and per-frame updates.

Community
Advanced