threejs-animation

# Three.js Animation ## When to Use - You need to animate objects, rigs, morph targets, or imported GLTF animations in Three.js. - The task involves mixers, clips, keyframes, procedural motion, or animation blending. - You are building motion behavior in a Three.js scene rather than just static rendering. ## Quick Start ```javascript import * as THREE from "three"; // Simple procedural animation with Timer (recommended in r183) const timer = new THREE.Timer(); renderer.setAnimationLoop(() => { timer.update(); const delta = timer.getDelta(); const elapsed = timer.getElapsed(); mesh.rotation.y += delta; mesh.position.y = Math.sin(elapsed) * 0.5; renderer.render(scene, camera); }); ``` **Note:** `THREE.Timer` is recommended over `THREE.Clock` as of r183. Timer pauses when the page is hidden and has a cleaner API. `THREE.Clock` still works but is considered legacy. ## Animation System Overview Three.js animation system has three main components: 1. **AnimationClip** - Container for keyframe data 2. **AnimationMixer** - Plays animations on a root object 3. **AnimationAction** - Controls playback of a clip ## AnimationClip Stores keyframe animation data. ```javascript // Create animation clip const times = [0, 1, 2]; // Keyframe times (seconds) const values = [0, 1, 0]; // Values at each keyframe const track = new THREE.NumberKeyframeTrack( ".position[y]", // Property path times, values, ); const clip = new THREE.AnimationClip("bounce", 2, [track])...