用 Three.js 搭一套低空任务 HUD

低空任务界面和普通 Three.js demo 的差别在于：状态密度高、时间轴连续、操作者要在 1 秒内读懂态势。

目标

• 机体位姿 + 航迹 + 禁飞/走廊
• 关键测条带（高度、速度、链路、电量）
• 60fps 预算下的可交互回放

场景分层

const layers = {
  world: 0,      // 地形 / 建筑
  mission: 1,    // 航点、走廊、禁飞
  vehicle: 2,    // 机体与传感器锥
  overlay: 3,    // HUD / 标注
};

把 mesh 按层管理，比“一个 scene 塞所有东西”更容易做显隐与拾取过滤。

相机策略

任务复盘常用三种相机：

1. Chase：跟随机头，适合姿态观察
2. Orbit on target：绕兴趣点，适合航迹检查
3. Top-down tactical：近似二维态势

不要在一帧里硬切矩阵，用短时插值（120–240ms）避免晕屏。

遥测叠加

WebGL 负责空间对象，DOM/Canvas2D 负责文字 HUD。这样字号、无障碍和 CSS 主题都更好控。

type Telemetry = {
  alt: number;
  spd: number;
  bat: number;
  link: 'ok' | 'degraded' | 'lost';
};

性能底线

预算项	建议
draw call	< 80（HUD 场景）
地形	分块 + LOD
轨迹	用 Line/Line2，避免每点一个 mesh
更新	遥测 10–20Hz，渲染 60Hz 插值

下一篇会把这条 HUD 接到位置环输出，做“控制量 → 可视化”闭环。