□ 粒子三件套齐全：扫描线 / 粉尘 / 火花，画面有纵深与"活气"
□ 辉光（UnrealBloomPass）开：设备高光带光晕，不过曝不糊
□ 工业调色（色彩分级）生效：整体冷色偏青蓝，高光略提亮
□ 录屏对比 Week 16 版本：画面"高级感"肉眼可辨

□ 扫描脉冲：至少一台设备的扫描光带循环上扫
□ 设备发光：外圈泛光呼吸，能随状态（正常蓝/告警红）切换
□ 能量柱 / 顶点动画：圆柱顶部波浪起伏
□ 特效随设备移动、互不干扰（挂 model.add 验证）

□ vue-tsc 零报错、零 any
□ 无 CDN（three 走 npm 包）
□ Vue 组件零 Three 依赖（粒子/后期/着色器全在引擎内，桥只传状态）
□ 断网（清缓存）打开仍可用（本地构建产物）
□ README 一键启动两条命令跑通

车间 3.0 渲染管线（三段式，Day 104 扩展）
┌────────────────────────────────────────────┐
│ 更新段（CPU）                               │
│  ├─ 时间驱动动画（uTime / 旋转 / 粒子相位） │
│  ├─ 脏检查状态（uState 只在变化时更新）      │
│  └─ LOD 每帧 update(camera)                 │
├────────────────────────────────────────────┤
│ 渲染段（GPU）                               │
│  ├─ 场景：模型 + 粒子(Points) + 特效(Mesh)  │
│  ├─ EffectComposer                          │
│  │   ├─ RenderPass（主渲染）                │
│  │   ├─ UnrealBloomPass（辉光）             │
│  │   ├─ 色彩分级 ShaderPass（调色）         │
│  │   └─ 可选：描边/景深（按档位开关）        │
│  └─ 合并静态件（护栏/地面/标准件）           │
├────────────────────────────────────────────┤
│ 控制段（降档开关 + visibility 暂停）          │
│  └─ QualityController：high/medium/low       │
└────────────────────────────────────────────┘

1. 性能线优先（卡 = 一切白搭）→ 超预算先降档
2. 氛围线其次（画面高级感是本周卖点）
3. 特效线最后（单点特效，少了不影响整体观感）

docs/acceptance/
├── 01-fps-budget.md        ← Day 118 预算表（实测数填满）
├── 02-screenshot-w16/      ← Week 16 车间截图（对比基线）
├── 03-screenshot-w17/      ← 车间 3.0 截图（氛围/特效/降档三档）
├── 04-video-demo.mp4       ← 演示视频（≤3 分钟）
└── 05-performance.csv      ← 性能实测记录（机器/分辨率/各场景 FPS）

□ 粒子系统 → 引擎内（Points 对象，不进 Vue）
□ 后处理管线 → 引擎内（EffectComposer 私有）
□ 着色器 → 引擎内（ShaderMaterial 封装为 createAtmosphere / 特效工厂）
□ LOD / 合并 / 降档 → 引擎内（optimize/ 目录）
□ Vue 侧只通过桥拿：状态（states/temps）、质量档位、进度
□ 无 Vue 组件内直接 new THREE.*

// 桥接口应保持不变（只可能新增，不破坏原有签名）
// 入向：update(states, temps) / setQuality(level)   ← 档位是新增形态
// 出向：onProgress / onReady                        ← 渲染进度事件

□ 把档位调到 low → 辉光关闭、粒子 500、分辨率 0.75 → 仍能渲染、不报错
□ 故意写错一个着色器（临时注释）→ 控制台给出编译错误而非白屏
□ 断网打开构建产物 → 全部本地资源可加载

【00:00-00:10】开场全景
  镜头：车间 3.0 全景慢转（粉尘粒子 + 辉光 + 工业冷色调）
  旁白："基于 Three.js 的工业 3D 车间——粒子氛围、后处理辉光
        与自定义着色器特效三线合一，并以内置性能预算保证流畅。"

【00:10-00:25】氛围
  镜头：推近到设备区，粉尘粒子漂浮 + 扫描线扫过
  旁白："扫描线与粉尘粒子构建空间纵深；辉光让高亮设备
        透出工业质感，整体色彩做了分级调色。"

【00:25-00:40】特效
  镜头：单台设备特写，扫描脉冲上扫 + 外圈泛光呼吸
  旁白："自定义着色器驱动的扫描脉冲与能量发光，
        状态切换（正常/告警）实时改变发光颜色。"

【00:40-00:55】LOD 与批量
  镜头：镜头快速拉远到全景，模型自动降级、帧率稳定
  旁白："远近自适应 LOD 降模 + 静态几何合并，
        50 台设备同屏帧率稳定。"

【00:55-01:15】性能证据
  镜头：打开 Stats 面板（FPS/ms/calls）跑 10 秒 → 展示预算表
  旁白："FPS 预算表逐项核算，draw call 受控，
        60 帧目标下预算达标。"

【01:15-01:35】降档兜底
  镜头：切到"画质"按钮 → low 档 → 画面降级但依然流畅
  旁白："内置三档画质与自动降档，弱机器也能保住流畅底线。"

【01:35-01:45】收尾
  镜头：回到全景淡出
  旁白："阶段三收官作品，README 一键启动。"

# 3D 工业车间（Three.js）Industrial Workshop 3D

一句话：Three.js + TypeScript 的工业 3D 车间——粒子氛围、
后处理辉光、自定义着色器特效，内置 FPS 预算与降档机制。

![车间全景](docs/acceptance/03-screenshot-w17/full.png)
![特效特写](docs/acceptance/03-screenshot-w17/effect.png)

## 技术栈
- 渲染：Three.js + EffectComposer（辉光/色彩分级）
- 特效：ShaderMaterial 自定义 GLSL（扫描脉冲/能量发光/顶点动画）
- 氛围：Points 粒子系统（扫描线/粉尘/火花）
- 性能：LOD 远近降模 / 静态几何合并 / 三档画质降档 / visibility 暂停
- 工程：Vite + TypeScript strict + Vue（桥接层隔离 Three 依赖）

## 快速启动
```bash
npm install
npm run dev      # 打开 http://localhost:5173

### 5.2 作品链资产盘点

**资产放哪里**：截图与视频进 `docs/acceptance/`（跟着代码走），作品集网页另存一份精选 6-8 张。

---

## 六、简历条目：150 字写法与参考答案

### 6.1 写法公式

**公式要点**：**数字 > 形容词**。"流畅"不稀缺，"50 台设备全效果 50fps"才是证据。

### 6.2 参考答案（直接可用）

> **3D 工业车间可视化（Three.js）**：使用 Three.js + TypeScript 构建工业 3D 车间，通过粒子系统（扫描线/粉尘/火花）、UnrealBloomPass 辉光与色彩分级营造工业氛围，自定义 GLSL 着色器实现扫描脉冲与设备状态发光。性能上采用 LOD 多级降模、静态几何合并将 draw call 大幅削减，内置三档画质与自动降档，50 台设备全效果下 FPS ≥ 50，弱机器自动降档仍流畅。

### 6.3 面试官可能追问（准备 30 秒口头版）

---

## 七、阶段 3 毕业总结

### 7.1 三周能力对照（Week 15-17 全量）

| 能力 | 学前的你 | 毕业的你 |
|------|---------|---------|
| 3D 基础 | 不会 Three.js | 场景/相机/渲染器/循环随手搭 |
| 光照材质 | 分不清 PBR | 光照/阴影/多材质/贴图 |
| 模型资产 | 只会简单几何 | 加载/封装/多级 LOD |
| 交互 | 无 | OrbitControls + raycaster + 桥接事件 |
| 氛围 | 无 | 粒子系统 + 后处理辉光/调色 |
| 特效 | 无 | 自定义 GLSL 着色器 |
| 性能 | 无概念 | FPS 预算表 + 合并 + 降档 |

### 7.2 对比表补全（Week 15 起的"手写 WebGL vs Three.js"）

**三行对照的结论**：Three.js 的价值不是"省掉 GLSL"，是**把通用部分封装，让你把精力留在"工业场景的特有表达"上**（氛围、特效、性能平衡）——这正好是作品集该强调的差异化。

### 7.3 阶段 3 验收小结（写入笔记）

---

## 八、常见坑点

### 坑 1：交付日还在改画面

症状：录视频时发现颜色不满意，现场调参，越调越乱。**修法：验收日零大改**——观感微调（辉光 0.5→0.55）允许，改架构/改特效一律延后到验收后。

### 坑 2：性能数据换机器录

症状：预算表在 A 机测、视频在 B 机录，数字对不上。**修法：同一台机器完成全部实测与录制**，README 标注机器信息。

### 坑 3：降档后报错白屏

原因：降档代码路径（关辉光/减粒子）没跑过。**修法：三档各完整跑一遍**，low 档必须能正常渲染（3.3 降级回退验证）。

### 坑 4：README 说"一键启动"实际跑不起来

原因：README 写完没从零验证。**修法：删 node_modules 重装，严格按 README 两条命令跑通**（Day 70 红线）。

### 坑 5：简历条目堆形容词没有数字

症状："性能优秀、画面精美"。**修法：全部换成可验证的量化**（50 台设备/3000 粒子/FPS≥50/draw call 下降）。

---

## 九、自测挑战

### T1 · 验收演练（60 分钟）

按第一节清单逐项打勾，**每项留档**（截图/录屏/表格）。任何一项打不了勾 → 记录原因与修复计划（但今天不改，列入收尾清单）。

### T2 · 录一支演示视频（60 分钟）

按第四节脚本录制，**按分镜走，别自由发挥**。录三遍取最好，视频 ≤3 分钟，含"性能证据"与"降档兜底"两段。

### T3 · README 从零验证（30 分钟）

写完 README → 删 node_modules → 按文档两条命令重跑。**让一个没看过代码的人跟着 README 跑通**（找不到人就让代码静置一周后再跑——"遗忘测试"）。

### T4 · 简历条目（30 分钟）

按第六节写 150 字条目 + 准备三个追问的口头回答（对着镜子说一遍）。

---

## 十、总结

| 环节 | 要点 |
|------|------|
| 验收 | 氛围/特效/性能/工程四类清单逐项打勾，全留档 |
| 三线合流 | 性能优先 → 氛围 → 特效；冲突按此裁决 |
| 架构红线 | 桥契约只扩不破；Vue 零 Three 依赖；降级可用 |
| 交付 | 演示视频（脚本分镜）+ README（从零验证）+ 简历（量化） |
| 毕业 | 三周能力对照 + 对比表补全 + 阶段小结入笔记 |

**"3D 车间 3.0"完成**——这是阶段 3 的画面天花板，也是数字孪生 Demo 的核心场景。本周你掌握了三件最重要的事：**用粒子与后期做出"高级感"、用着色器写出"工业特效"、用预算表守住"性能线"**。下周起进入 3D 数据可视化进阶，把真实数据接进这个世界。

---

> **下周预告**：Week 18 3D 数据可视化进阶——数据如何映射成 3D 形态（柱/面/流场）、实时数据接入前的准备（数据层与渲染层解耦），为数字孪生主线铺路。