Agent skill
threejs-animation
Three.js animation - keyframe animation, skeletal animation, morph targets, animation mixing. Use when animating objects, playing GLTF animations, creating procedural motion, or blending animations.
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/threejs-animation
SKILL.md
Three.js Animation
Animation System
Three.js animation has three components:
- AnimationClip - Keyframe data
- AnimationMixer - Plays animations
- AnimationAction - Controls playback
Playing GLTF Animations
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
const loader = new GLTFLoader();
loader.load("model.glb", (gltf) => {
const model = gltf.scene;
scene.add(model);
const mixer = new THREE.AnimationMixer(model);
const clips = gltf.animations;
if (clips.length > 0) {
const action = mixer.clipAction(clips[0]);
action.play();
}
});
// Update in animation loop
function animate() {
mixer.update(clock.getDelta());
}
AnimationAction Controls
const action = mixer.clipAction(clip);
action.play();
action.stop();
action.reset();
action.paused = false;
action.timeScale = 1; // Speed (negative = reverse)
action.weight = 1; // Blend weight
// Loop modes
action.loop = THREE.LoopRepeat; // Loop forever
action.loop = THREE.LoopOnce; // Play once
action.loop = THREE.LoopPingPong; // Alternate
action.clampWhenFinished = true;
Crossfade Animations
const action1 = mixer.clipAction(clip1);
const action2 = mixer.clipAction(clip2);
action1.play();
// Crossfade to action2
action1.crossFadeTo(action2, 0.5, true);
action2.play();
Morph Targets
// Access morph targets
mesh.morphTargetInfluences[0] = 0.5;
// By name
const smileIndex = mesh.morphTargetDictionary["smile"];
mesh.morphTargetInfluences[smileIndex] = 1;
Procedural Animation
const clock = new THREE.Clock();
function animate() {
const t = clock.getElapsedTime();
// Sine wave
mesh.position.y = Math.sin(t * 2) * 0.5;
// Circular motion
mesh.position.x = Math.cos(t) * 2;
mesh.position.z = Math.sin(t) * 2;
}
Skeletal Animation
const skinnedMesh = model.getObjectByProperty("type", "SkinnedMesh");
const skeleton = skinnedMesh.skeleton;
// Find bone
const headBone = skeleton.bones.find(b => b.name === "Head");
headBone.rotation.y = Math.sin(time) * 0.3;
// Skeleton helper
const helper = new THREE.SkeletonHelper(model);
scene.add(helper);
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
agent-ops-spec
Manage specification documents in .agent/specs/. Use when user provides requirements, acceptance criteria, or feature descriptions that need to be tracked and validated against implementation.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-testing
Test strategy, execution, and coverage analysis. Use when designing tests, running test suites, or analyzing test results beyond baseline checks.
agent-ops-state
Maintain .agent state files. Use at session start, after meaningful steps, and before concluding: read/update constitution/memory/focus/issues/baseline consistently.
Didn't find tool you were looking for?