threejs-animation

1# Three.js Animation
2 
3Targets three.js r186. Examples use WebGLRenderer; the WebGPU and TSL section uses WebGPURenderer.
4 
5## Quick Start
6 
7```javascript
8import * as THREE from "three";
9 
10const renderer = new THREE.WebGLRenderer({ antialias: true });
11renderer.setPixelRatio(window.devicePixelRatio);
12renderer.setSize(window.innerWidth, window.innerHeight);
13document.body.appendChild(renderer.domElement);
14 
15const scene = new THREE.Scene();
16 
17const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
18camera.position.set(0, 0.5, 3);
19 
20const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), new THREE.MeshNormalMaterial());
21scene.add(mesh);
22 
23const timer = new THREE.Timer();
24timer.connect(document); // also keeps deltas small after the tab was hidden
25 
26function animate() {
27  timer.update(); // first thing each frame: fixes getDelta()/getElapsed() for this frame
28  const delta = timer.getDelta();
29  const elapsed = timer.getElapsed();
30 
31  mesh.rotation.y += delta; // frame-rate-independent spin
32  mesh.position.y = Math.sin(elapsed * 2) * 0.25; // bob on absolute time
33 
34  renderer.render(scene, camera);
35}
36 
37renderer.setAnimationLoop(animate);
38```
39 
40## How the System Fits Together
41 
42- **AnimationClip**: keyframe data — tracks of times and values, no playback state.
43- **AnimationMixer**: plays clips on one root object and all its descendants.
44- **AnimationAction**: playback control for one clip on one mixer.
45…