Threejs Animation

Handles the full Three.js animation pipeline from basic procedural motion to complex skeletal rigs with blend trees. Covers AnimationMixer setup, keyframe track creation, GLTF animation loading, morph target blending, and multi-action crossfading. Most useful when you're moving beyond simple tweens and need proper character animation, facial expressions, or complex object choreography. The skeletal animation examples are solid for rigged characters, and the action blending patterns work well for game-style state machines. Documentation is thorough on the mixing and weighting mechanics that usually trip people up.

install copies · 90 days. Times the install command was copied on this site in the last 90 days, bots filtered.: 11
skills.sh installs: 24.7K
GitHub stars: 4.1K
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/threejs-skills --skill threejs-animation --agent claude-code

Installs into .claude/skills of the current project.

Files

Three.js Animation

Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.

Quick Start

import * as THREE from "three";

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0.5, 3);

const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
scene.add(mesh);

const timer = new THREE.Timer();
timer.connect(document); // also keeps deltas small after the tab was hidden

function animate() {
  timer.update(); // first thing each frame: fixes getDelta()/getElapsed() for this frame
  const delta = timer.getDelta();
  const elapsed = timer.getElapsed();

  mesh.rotation.y += delta; // frame-rate-independent spin
  mesh.position.y = Math.sin(elapsed * 2) * 0.25; // bob on absolute time

  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

SKILL.md on GitHub