Day 126 · BOSS 战 — 3D 数据看板交付日：柱、面、点与交互的四线合流
前五天把数据管线的每一环做通了：映射设计、柱/面/点三种形态、数据层与渲染层解耦、拾取联动。今天把它们合流成"3D 数据看板"并做最终验收。参照 Day 70/119 的交付纪律：今天以验收、录片、成文为主，不写大块新代码。交付 = 验收清单逐项打勾 + 一支 ≤3 分钟演示视频 + README + 简历条目。“3D 数据看板"让车间从"好看"变成"能讲数据故事”——阶段 3（建模→氛围→数据）的最后一块拼图，也是数字孪生 Demo 的数据底座。
目录
一、验收清单：对照周总览逐项打勾
Week 18 总览第五节定的验收标准，今天逐项执行并留档（截图/录屏/文档进 docs/acceptance/）：
1.1 形态验收（Day 121-123 的合流）
□ 3D 柱状图：数据驱动生成，高度/颜色随数据变化，500+ 根流畅
□ 3D 热力曲面：顶点位移 + 顶点颜色映射数值，视角可转
□ 粒子/流场：点位粒子 + 动态流场，颜色/大小表达数值
□ 三者同屏协调，不互相遮挡到不可读（有布局分层）
1.2 解耦验收（Day 124 的核心）
□ 静态源 → 假实时源切换：渲染层文件 0 改动
□ 换 Mapper（能耗→温度）：只新增/替换数据源与 Mapper，渲染层零改动
□ DataSource / Mapper / 渲染层三层独立可单测（跑通测试）
□ 桥契约只扩不破（setData/setSource/select 新增，原签名不变）
1.3 交互验收（Day 125 的合流）
□ 点击柱子 → 高亮 + 详情面板
□ 点击柱子 → 联动 2D ECharts 高亮对应项
□ hover 曲面 → 显示该点数值（选做）
□ 点空白 → 清除选中态
1.4 性能与工程验收
二、四线合流：柱 / 面 / 点 / 交互
2.1 看板布局（合流时的协调方案）
三种形态同屏，避免互相遮挡到不可读：
┌──────────────────────────────────────────┐
│ 中央：3D 热力曲面（温度场）— 场景主角 │
│ 左侧：3D 柱状图（设备能耗，可拾取联动） │
│ 右侧：流场粒子（管道流速）— 动态点缀 │
│ 底部：2D ECharts 联动区（选中设备的趋势） │
│ 角落：图例（色带 + 数值刻度）+ 数据源切换 │
└──────────────────────────────────────────┘
布局原则：主次分明（曲面主角）、柱/点分区（不重叠）、2D 区承接"精确读数"（3D 看空间、2D 看数值）。
2.2 合流时的优先级（冲突裁决）
1. 数据正确性优先（映射/数值不能错——可视化立身之本）
2. 交互可用性其次（拾取/联动必须稳）
3. 性能再其次（超预算降档/减粒子）
4. 观感最后（配色/氛围，可调）
合流的典型冲突：三者同屏卡顿 → 先减流场粒子数；柱与曲面重叠 → 调布局分区；拾取误命中 → 调整射线 target 顺序。
2.3 验收留档清单
docs/acceptance/
├── 01-data-mapping.md ← Day 120 映射设计（施工图）
├── 02-fps-budget.md ← Day 118 预算表（本周图表实测数）
├── 03-screenshot/ ← 柱/面/点/交互各态截图
├── 04-video-demo.mp4 ← 演示视频（≤3 分钟）
└── 05-test-report.md ← DataSource/Mapper 测试通过记录
三、最终代码体检（架构红线）
3.1 架构自检清单（代码审查视角）
□ 三种图表 → 引擎内 viz/ 目录（BarChart3D / HeatSurface / FlowField）
□ 数据层 → 引擎内 data/ 目录（DataSource / DataMapper）
□ 拾取交互 → 引擎内 interaction/ 目录
□ 图例/详情/2D 联动 → Vue 组件（UI 归 UI，边界纪律）
□ Vue 组件零 Three 依赖（不直接 new THREE.*）
□ 桥只传快照/选中 id，不传 Three 对象
□ 无 CDN、无任何 any、vue-tsc 零报错
3.2 边界回归验证
桥契约是否"只扩不破"（Week 15 红线延续）：本周新增 setData / setSource / select 都应只新增，不改坏原有签名。
// 验证：git diff 看 src/bridge/ 的改动
// ✅ 允许：新增 setData / setSource / select 事件
// ❌ 禁止：改动 init / setQuality / onReady 的原有签名
3.3 数据管线验证（本周核心）
✓ 跑通 vitest：StaticSource / MockRealtimeSource / 两个 Mapper 的测试
✓ 换源实验：静态 → 假实时，渲染层 0 改动
✓ 模拟数据只在测试/演示分支启用（用户规则），生产装配走真实入口
四、演示视频：先写脚本再录制
4.1 参考脚本（直接可用，≤3 分钟）
【00:00-00:08】开场全景
镜头：数据看板全景（中央曲面 + 左柱 + 右流场）
旁白："基于 Three.js 的 3D 工业数据看板——
温度场曲面、能耗柱状、流速流场三种形态同屏，
数据层与渲染层完全解耦。"
【00:08-00:22】形态与数据
镜头：推近热力曲面，转动视角
旁白："热力曲面用顶点位移 + 顶点颜色映射温度，
颜色从蓝到红连续过渡。"
【00:22-00:36】柱状与拾取
镜头：点击一根柱子 → 高亮 + 详情面板
旁白："能耗柱状图基于实例化渲染，500 根一次绘制。
点击拾取后，右侧 2D 图表联动高亮该设备。"
【00:36-00:48】流场
镜头：切到右侧流场，粒子沿方向流动
旁白："流速场用动态粒子表达——粒子沿矢量场移动，
出界重生形成循环流动。"
【00:48-01:05】数据源切换（高光）
镜头：控制台切"静态源 → 假实时源"，图表开始跳动
旁白："核心架构：数据源抽象 + 快照映射。
切换数据源、更换业务数据，渲染层一行代码不改。"
【01:05-01:20】性能证据
镜头：打开 Stats 面板跑 10 秒
旁白："三种形态同屏下稳定 50 帧以上，
实时刷新只更新缓冲，无卡顿尖刺。"
【01:20-01:35】交互联动
镜头：点击另一根柱子 → 2D 趋势联动
旁白："3D 看空间、2D 看数值，标准工业大屏交互范式。"
【01:35-01:45】收尾
镜头：全景淡出
旁白："阶段三收官，README 一键启动。"
4.2 录制纪律（沿用 Day 119）
录三遍取最好；锁 1920×1080、缩放 100%、固定机器
数据源切换/拾取联动两个高光段落一定要录到
性能镜头用 Stats 面板，同一台机器
五、README 与作品资产
5.1 README 结构（沿用 Day 70/119 模板）
# 3D 工业数据看板（Three.js）
一句话：Three.js + TypeScript 的 3D 工业数据可视化看板——
柱状/热力曲面/流场三形态，数据层与渲染层解耦，支持拾取与 2D 联动。
## 技术栈
- 渲染：Three.js（柱状 InstancedMesh / 曲面顶点色 / Points 流场）
- 数据：数据源抽象（静态/假实时）+ 快照映射，渲染层零业务耦合
- 交互：Raycaster 拾取（instanceId 解析）+ 桥接事件 + 2D 联动
- 工程：Vite + TypeScript strict + Vue（桥隔离 Three 依赖）
## 快速启动
```bash
npm install
npm run dev # 打开 http://localhost:5173
功能清单
[x] 3D 柱状图（500+ 实例化渲染，点击拾取）
[x] 3D 热力曲面（顶点位移 + 顶点颜色）
[x] 动态流场（粒子沿矢量场流动）
[x] 数据层与渲染层解耦（换数据源零改动）
[x] 拾取 → 详情 + 2D ECharts 联动
架构
（贴三层架构图 ASCII：Vue / 桥 / 引擎(数据层+渲染层)）
性能
（贴 1.4 实测表格）
### 5.2 作品链资产盘点（Week 15-18 四阶段）
阶段 3 作品链（可打包进作品集）
├── 车间 1.0（Week 15）场景/光照/循环 → 基础
├── 车间 2.0（Week 16）模型/材质/阴影 → 真实
├── 车间 3.0（Week 17）氛围/特效/性能 → 高级感
└── 3D 数据看板（Week 18）柱/面/点 + 解耦+交互 → 数据故事 ★ 收官
**这条作品链是"成长叙事"的完整证据**：从"会搭场景"到"能讲数据故事"，每一周都有可演示的增量。
---
## 六、简历条目：150 字写法与参考答案
### 6.1 写法公式
技术栈关键词 + 数据形态（柱/面/流场）+ 架构亮点（解耦/实例化/拾取联动）
量化（500+ 柱 / FPS ≥ 50 / 换数据源零改动）
### 6.2 参考答案（直接可用）
> **3D 工业数据可视化看板（Three.js）**：基于 Three.js + TypeScript 实现工业 3D 数据看板，覆盖柱状图（InstancedMesh 实例化渲染 500+ 柱体）、热力曲面（顶点位移与顶点颜色映射）与动态流场三种形态。通过数据源抽象与快照映射实现数据层与渲染层解耦，切换数据源渲染层零改动；Raycaster 拾取（instanceId 解析）联动 2D ECharts 图表。三形态同屏 FPS ≥ 50。
### 6.3 面试官可能追问（准备 30 秒口头版）
Q：数据层与渲染层解耦具体怎么做的？
A：三层：数据源实现统一接口出快照，Mapper 把业务字段抹平成
values/field/points，渲染层图表只认快照。换数据只改数据源和 Mapper。
Q：InstancedMesh 拾取怎么知道点了哪根？
A：射线命中返回 instanceId，就是第几个实例，映射回数据数组下标。
Q：三种形态为什么要放一起，不怕乱吗？
A：布局分区 + 主次分明（曲面主角），3D 看空间关系、2D 承接精确读数。
这是工业大屏的标准交互范式。
---
## 七、阶段 3 毕业总结（Week 15-18 全量）
### 7.1 四周能力对照
| 能力 | 学前的你 | 毕业的你 |
|------|---------|---------|
| 3D 场景 | 不会 Three.js | 场景/光照/相机/循环随手搭 |
| 模型资产 | 只会几何体 | GLTF 导入/材质贴图/阴影/LOD |
| 氛围特效 | 无 | 粒子/后处理/自定义着色器 |
| 性能 | 无概念 | FPS 预算表/合并/降档 |
| 数据可视化 | 只会 ECharts 2D | 3D 柱/面/流场 + 数据管线解耦 |
| 交互 | 无 | 拾取/高亮/2D 联动/钻取 |
| 架构 | 无分层 | Vue/桥/引擎 三层边界清晰 |
### 7.2 对比表补全（"手写 WebGL vs Three.js"第 10-12 行）
第 10 行 数据驱动几何：手写要管理顶点缓冲+重建 → Three.js 改属性即更新
第 11 行 顶点颜色：手写要顶点色缓冲 → BufferAttribute “color” + vertexColors
第 12 行 拾取：手写要射线-三角形求交 → raycaster + instanceId
**对照表的结论**：Three.js 把"图形学脏活"封装好，把精力留给**数据表达与架构设计**——这才是工业可视化工程师的价值所在（也是作品集该强调的差异化）。
### 7.3 阶段 3 验收小结（写入笔记）
阶段 3 完成：从"不会 Three.js"到"能做 3D 工业数据看板"
核心收获：
3D 工程骨架（场景/资源/循环/性能预算）
数据可视化三形态（柱/面/点）+ 数据层解耦
交互与联动（拾取/高亮/2D 联动）
下一步：Week 19 动画与叙事进阶——3D 场景叙事、镜头语言、数据故事
---
## 八、常见坑点
### 坑 1：交付日还在改架构
症状：录视频时发现数据源切不动，现场改解耦。**修法：验收日零大改**——改配色/参数允许，改架构/数据管线一律延后到验收后。
### 坑 2：三种形态同屏互相遮挡不可读
症状：柱子和曲面叠在一起。**修法：布局分区 + 主次分明（第二节 2.1）**，并确认从主要视角看都清晰。
### 坑 3：数据正确性没人验证
症状：映射算错，柱子高度和数值对不上还觉得很酷。**修法：先跑通 DataSource/Mapper 测试（单测）+ 随机抽 3 个点人工核对**。
### 坑 4：拾取联动"时灵时不灵"
原因：NDC 换算、targets 顺序、事件绑定时机。**修法：固定视角反复测；先修"点柱子必命中"再谈联动**。
### 坑 5：README 一键启动跑不通
原因：没从零验证。**修法：删 node_modules 按文档重跑**（Day 70 红线）。
### 坑 6：简历堆形容词没数字
原因："做了数据可视化"。**修法：换成"500+ 柱 / 三形态同屏 50fps / 换数据源零改动"**。
---
## 九、自测挑战
### T1 · 验收演练（60 分钟）
按第一节清单逐项打勾并留档。**任何打不了勾的项 → 记录原因与修复计划（今天不改，列收尾清单）**。
### T2 · 录一支演示视频（60 分钟）
按第四节脚本录制，**数据源切换与拾取联动两段必须录到**。录三遍取最好，≤3 分钟。
### T3 · 数据管线测试（30 分钟）
跑通 vitest（DataSource/Mapper 测试），把通过记录写进 `docs/acceptance/05-test-report.md`。
### T4 · 简历条目（30 分钟）
按第六节写 150 字条目 + 准备三个追问的口头回答（对着镜子说一遍）。
---
## 十、总结
| 环节 | 要点 |
|------|------|
| 验收 | 形态/解耦/交互/性能/工程五类清单逐项打勾留档 |
| 四线合流 | 柱+面+点+交互；布局分区、数据正确性优先 |
| 架构红线 | 桥只扩不破；Vue 零 Three 依赖；数据管线可测 |
| 交付 | 演示视频 + README + 简历（量化） |
| 毕业 | 四周能力对照 + 对比表补全 + 阶段小结入笔记 |
**"3D 数据看板"完成**——阶段 3 收官之作，数字孪生 Demo 的数据底座。本周你掌握了三件最重要的事：**用柱/面/点三种形态表达工业数据、用解耦管线为实时数据铺好管道、用拾取联动让看板能查**。至此，从"建模"到"氛围"到"数据"的完整链条全部打通。下周进入动画与叙事进阶，把数据讲成**故事**。
---
> **下周预告**：Week 19 动画与叙事进阶——3D 场景叙事（镜头语言、转场）、数据故事（把指标串成叙事线）、开场动画与引导动效，让看板"会说话"。