✅ 设备级：叶轮/扇叶旋转、指示灯闪烁、告警脉冲、机械臂往复
✅ 环境级：扫描线扫过、粒子飘动（Week 17）
❌ 数据级：由 WS 驱动的运动——第 6 个月（Week 26+）

时间线   0s        0.5s        1s
旋转    0°     →   90°    →   0°      （三个关键帧）
              (插值)      (插值)
结果：叶片 0→90→0 往复摆动

import * as THREE from "three";

// ① KeyframeTrack：一条"属性随时间变化"的曲线
//    (对象.属性路径, 时间数组, 值数组)
const track = new THREE.NumberKeyframeTrack(
  ".rotation[y]",                // 目标：rotation.y
  [0, 0.5, 1],                   // 关键帧时间点（秒）
  [0, Math.PI / 2, 0]            // 对应时刻的值（弧度）
);

// ② AnimationClip：把多条 track 打包成一个"完整动作"
const clip = new THREE.AnimationClip("swing", 1, [track]);   // 名字/时长/曲线们

// ③ 之后用 AnimationMixer 播放这个 clip（见第三节）

import * as THREE from "three";

// 1. 为模型创建 mixer（绑定到模型对象）
const mixer = new THREE.AnimationMixer(model);

// 2. 从 clip 取出"可播放的动作"（Action）
const swingAction = mixer.clipAction(clip);
swingAction.play();               // 开始播放

// 3. 动作控制
// swingAction.stop()  停止
// swingAction.paused = true   暂停
// swingAction.timeScale = 2   倍速（0.5 慢放 / 2 快进）

// 两个动作同时播：叶轮转 + 指示灯闪（各是独立 clip）
const spinAction = mixer.clipAction(spinClip);
const blinkAction = mixer.clipAction(blinkClip);
spinAction.play();
blinkAction.play();
// mixer 会把两个动作的变换"叠加"到模型上（内部自动处理混合）

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";

const gltf = await new GLTFLoader().loadAsync("/assets/models/pump.glb");

const model = gltf.scene;
scene.add(model);

// 模型自带动画：gltf.animations 是 AnimationClip 数组
console.log(gltf.animations);   // 看模型带了哪些动作（如 "Spin"、"Pulse"）

if (gltf.animations.length > 0) {
  const mixer = new THREE.AnimationMixer(model);
  // 播放第一个动作（或按名字查找）
  const action = mixer.clipAction(gltf.animations[0]);
  action.play();
  // ★ 重要：mixer 要在循环里 update(delta)——见第六节
}

// 设备整体缓慢自转：直接改 rotation（Day 100 时间纪律）
const tick = () => {
  const delta = clock.getDelta();
  model.rotation.y += 0.3 * delta;   // 每秒 0.3 弧度
  // ...
};

// 指示灯闪烁：0s 亮 → 0.5s 灭 → 1s 亮（往复）
// 用材质 emissiveIntensity（自发光强度）做"亮灭"
const blinkTrack = new THREE.NumberKeyframeTrack(
  "material.emissiveIntensity",
  [0, 0.25, 0.5, 0.75, 1],          // 时间点
  [1, 0, 1, 0, 1]                   // 亮度值（亮灭交替）
);
const blinkClip = new THREE.AnimationClip("blink", 1, [blinkTrack]);

// 注意：track 路径是相对 model 的——"material" 指 model 的第一个子 Mesh 的材质
const mixer = new THREE.AnimationMixer(model);
const blinkAction = mixer.clipAction(blinkClip);
blinkAction.setLoop(THREE.LoopPingPong, Infinity);   // 往复循环（乒乓）
blinkAction.play();

import * as THREE from "three";

// 引擎里统一管理所有设备的 mixer
const mixers: THREE.AnimationMixer[] = [];

// 每个带动画的模型创建 mixer 后加入列表
function attachMixer(model: THREE.Object3D): THREE.AnimationMixer {
  const mixer = new THREE.AnimationMixer(model);
  mixers.push(mixer);
  return mixer;
}

// 渲染循环：所有 mixer 每帧 update(delta)（Day 100 时间纪律的进阶应用）
const clock = new THREE.Clock();
const tick = () => {
  const delta = clock.getDelta();

  // 1. 更新所有动画（必须喂真实 delta！）
  mixers.forEach((m) => m.update(delta));

  // 2. 直接改属性的动画（Day 100 姿势）
  // models.forEach((m) => m.rotation.y += 0.3 * delta);

  // 3. 相机 + 渲染（Day 109 起用 composer）
  controls.update();
  composer.render();
  rafId = requestAnimationFrame(tick);
};