Anpassen: Electric motor and generator teardown

# 任务：做一个网页 3D 教学实验「电动机与发电机：拆开看」

技术栈：Three.js r163+（ES modules）+ 原生 JS/CSS。所有模型程序化建模。画面目标是"高端工业产品拆解片"，参考 Apple 产品发布会的爆炸图镜头、戴森的产品剖视影片、KeyShot 工作室渲染。

**执行顺序（强制）**：
1. 写简短设计（章节、模型清单、镜头表），给我确认；
2. 搭"材质球测试场景"（见第三章），截图给我确认光泽；
3. 搭相机系统并做一段 20 秒的开场镜头，导出逐帧截图给我确认运镜；
4. 以上都确认后，再完整实现。

**明确禁止**：霓虹发光、赛博网格、玻璃拟态面板、强 Bloom、高饱和磁感线、塑料感金属、方块加圆柱拼出来的简陋模型、卡片式仪表盘、线性插值的机械运镜、相机瞬移、镜头抖动停顿。

---

## 第一章 光泽：金属必须"亮得像真的"

### 1.1 渲染管线（最常见的错误在这里）
- 渲染器设置：`outputColorSpace = SRGBColorSpace`，`toneMapping = NeutralToneMapping`（Khronos PBR Neutral，产品渲染色彩最准；不可用时退到 AgXToneMapping），`toneMappingExposure` 在 1.0–1.3 之间调。
- EffectComposer 的渲染目标必须用 `HalfFloatType`（HDR），这样高光可以超过 1.0，Bloom 才能只抓到真正的高光点。
- **后期链的最后一个 Pass 必须是 OutputPass**，色调映射和 sRGB 转换都在这里完成。没有它，整个画面会发灰发平。
- 抗锯齿：composer 渲染目标开 `samples: 4`；高端设备可以再加 SMAA。像素比上限 2。

### 1.2 金属底色必须用真实反射率（不许调暗）
金属"暗"的部分来自它反射的黑色环境，而不是底色。底色按物理 F0 值给，以下为 sRGB 值：
| 材质 | 底色 | metalness | roughness | 备注 |
|---|---|---|---|---|
| 抛光钢（转轴） | `#c9cbcd` | 1 | 0.08–0.12 | 要能清楚映出灯带的形状 |
| 拉丝铝 / 冲压钢壳 | `#d6d8da` | 1 | 0.32 | `anisotropy 0.7`，沿圆周方向拉丝 |
| 喷砂铸铝（端盖） | `#cfd1d3` | 1 | 0.48 | 细噪声粗糙度贴图，范围 0.4–0.56 |
| 黄铜换向片 | `#f2d9a0` | 1 | 0.22 | `anisotropy 0.6`，沿旋转方向；电刷接触带 roughness 0.1，更亮 |
| 漆包铜线 | `#eaa27c` | 1 | 0.28 | `clearcoat 1`，`clearcoatRoughness 0.05`；底层铜加清漆，要出现双层高光 |
| 硅钢片（带绝缘涂层） | `#9a9ea3` | 0.85 | 0.4 | 沿轴向每片一条细暗线；端面冲压边 roughness 0.2 更亮 |
| 滚珠 / 轴承圈 | `#d0d2d4` | 1 | 0.06 | 小而锐的高光点 |
| 镀镍钕磁钢 | `#d8dadc` | 1 | 0.18 | |
| 铁氧体磁钢 | `#3b3d40` | 0 | 0.7 | 非金属哑光；极面只涂低饱和标识漆，N `#b5534a`，S `#4f74a8` |
| 云母片 | `#3a2614` | 0 | 0.55 | |
| 碳刷 | `#2a2a2c` | 0 | 0.85 | |
| 塑料件 | `#1d1f22` | 0 | 0.5 | clearcoat 0.15 |
- 金属的 `envMapIntensity` 设为 1.2–1.5，非金属 0.8–1.0。
- 拉丝方向用 MeshPhysicalMaterial 的 `anisotropy` + `anisotropyRotation`（或 anisotropyMap）实现；圆柱件的 UV 必须沿圆周展开，否则拉丝方向会错。
### 1.3 粗糙度必须有变化（这是"真实感"的来源）
每种金属都要有程序生成的粗糙度贴图（Canvas，1024²，anisotropy 8），由三层叠加：
1. **主纹理**：拉丝（几千条长度、灰度随机的细线）或喷砂（细噪声）；
2. **低频斑块**：用 2–3 个大尺度噪声让粗糙度上下浮动 ±0.06，模拟手摸过、擦拭过的痕迹；
3. **稀疏细划痕**：每张贴图 20–60 条短而亮的细线，长度随机、方向随机。
另外：换向片接触带、轴承滚道这些磨损区要更光滑；边角处略粗糙。
### 1.4 倒角（高光落在哪里由它决定）
**所有锐边**必须倒圆角，半径为零件尺寸的 1–3%，至少 3 段，法线要平滑过渡。没有倒角，边缘就接不住高光，整个零件显得像 CG 方块。车削件（转轴、换向器、端盖）用 LatheGeometry，在轮廓线上直接画出倒角；挤出件用 ExtrudeGeometry，配合 `bevelEnabled`、`bevelSegments ≥ 3`。
### 1.5 环境与灯光：大面积纯黑 + 少数几块很亮的灯
金属反射什么就是什么，所以**环境必须对比极强**：90% 是纯黑，10% 是很亮、边缘柔和的灯。
- **环境贴图**：用 PMREMGenerator.fromScene 烘一个摄影棚，`sigma` 设为 0，保留锐利反射。
- 房间：反面球体，颜色 `#050607`（要接近纯黑）。
- 灯：用带渐变纹理的平面（中心亮、边缘 20% 柔和衰减），用 MeshBasicMaterial 乘以高亮度系数。HDR 亮度要够，金属才会亮。
- 顶部大柔光箱：10×4，颜色 `#f4f1ea`，亮度 ×8，位置 (0, 9, 3)；
- 左后长灯带：0.8×12，颜色 `#d4e3ff`，亮度 ×14，位置 (-7, 2, -5)，竖放，在圆柱件上拉出一道冷色长高光；
- 右后细灯带：0.4×10，颜色 `#fff2e0`，亮度 ×12，位置 (7, 3, -4)，给铜和黄铜勾出暖色的边；
- 正面低位弱反光板：6×1.5，颜色 `#ffffff`，亮度 ×2，位置 (0, -1, 8)，让朝下的面有一条淡淡的高光；
- 环境中其余部分全部保持黑色。黑色本身就是"负光"，金属上的暗带由它形成，有了暗带才显得锐利。
- **RectAreaLight**（实时、可移动，用来产生滑动的高光）：初始化 RectAreaLightUniformsLib，放 2 块：
- A 灯：0.3×3，强度 18，颜色 `#ffffff`，竖放在主体左后方；
- B 灯：2×0.4，强度 10，颜色 `#ffe9d0`，横放在主体右上方。
- **DirectionalLight 主光**：只负责投影，强度 1.2，阴影贴图 2048，`radius 4`，阴影相机紧贴主体。
- **HemisphereLight**：强度 0.15，天空色 `#d7dde6`，地面色 `#121110`，只用来托住暗部。
- **高光必须动起来**：
- 待机时 A 灯沿弧线缓慢往复扫过主体，周期约 14 秒；
- 每次镜头切换时，`scene.environmentRotation.y` 跟着相机方位角旋转 15–30%，让反射随镜头滑动；
- 开场"光扫亮相"：主体从全黑开始，一条灯带从左到右扫过，金属依次被点亮，用时约 2.4 秒。
### 1.6 地面
- 用 Reflector，分辨率为画布的 1/2，在 shader 内做 9 次采样模糊。地面底色 `#0b0c0e`，反射混合 0.22，随离主体的距离径向衰减到 0。
- 主体正下方加一块柔和的椭圆接触暗斑。
- 地面上不放任何网格或文字。
### 1.7 后期链（顺序固定）
1. RenderPass（HDR，MSAA）。
2. **GTAOPass**：半径为主体直径的 2–3%，`thickness 0.8`，`distanceExponent 1.5`，`samples 12`；降噪参数 `lumaPhi 10`、`depthPhi 2`、`normalPhi 3`、`radius 5`、`rings 2`、`samples 12`；混合强度 0.8。
3. **轮廓线 Pass**（读 GTAO 的深度和法线）：
- 4 个邻居采样；深度跳变用相对值 `(z - zn) / -z` 计算，经 `smoothstep(0.012, 0.04)` 后只描远侧边缘；
- 法线跳变乘以 0.45；
- 线色 `#07090a`，机械主体强度 0.2，原理模式的示意线圈强度 0.5。
4. **Bloom**：threshold 设为 1.0（HDR 值，只有镜面高光和发光元素超过它），strength 0.25，radius 0.35。目标是钢珠和抛光轴上出现一个小而亮的"闪点"，而不是整片发光。
5. **调色 Pass**：
- 轻 S 曲线 `mix(c, c*c*(3-2c), 0.14)`；
- 高光略暖、暗部略冷，各约 ±0.008；
- 暗角强度 0.45；
- 暗部胶片颗粒 0.015。
6. BokehPass（只在特写镜头开启，见第二章）。
7. **OutputPass**（必须）。
**自适应降级**：帧率持续低于 45 时，依次处理：GTAO 和轮廓线 → 反射降到 1/4 → Bloom → RectAreaLight 减到 1 块 → 像素比 → 阴影。
---
## 第二章 运镜：像摄影师在拍，而不是两点插值
### 2.1 相机系统（先搭这个，再做内容）
写一个 CameraDirector，统一管理三种模式：
- **镜头模式（Shot）**：按镜头表播放预设运镜；
- **跟随模式（Follow）**：镜头跟踪某个目标，比如选中的零件、旋转中的线圈；
- **自由模式（Free）**：用户用 OrbitControls 操作。

相机的状态 = 机位 position、注视点 target、焦距 fov、滚转 roll、对焦距离 focus。五个量各自独立插值。
**镜头的数据结构**：

- `path`：Catmull-Rom 样条的机位路径点（至少 3 个点，保证走的是弧线）；
- `target`：注视点路径（可以是固定点，也可以是一段样条）；
- `fov`：起止值；
- `roll`：起止值；
- `dur`：时长；

- `ease`：缓动；

- `focus`：对焦目标；
- `hold`：落定后的停留时间；

- `onSettle`：落定后触发的事件（出字幕、出标注）。
**插值规则**：

- **注视点领先、机位跟随**：注视点用比机位快约 15% 的缓动，模仿摄影师先转头、再移动身体。
- **大幅运镜用 easeInOutQuint，小幅用 easeInOutCubic，严禁线性插值。**
- **速度连续**：镜头被打断时，从当前位置和当前速度平滑衔接到新镜头（用临界阻尼弹簧过渡约 0.4 秒），不能从静止重新起步，更不能跳帧。
- **滚转**：沿弧线运动时加不超过 1.5° 的倾斜，到达后回正，模仿摇臂。
- **焦距呼吸**：推镜时 FOV 同步收窄 2–4°，拉镜时放宽，增加纵深感。
- **速度上限**：相机角速度不超过 35°/s，平移速度不超过主体直径的 0.8 倍/秒。
- **落定**：相机落定后先停 0.4–0.8 秒，字幕和标注才淡入。字幕永远不和运镜同时出现。
**手持微动**：在 Shot 和 Follow 模式的停留期间，给机位和注视点叠加极轻的柏林噪声：幅度为观察距离的 0.15–0.25%，频率约 0.15–0.3Hz，两个分量相位不同。用户一开始操作就把微动淡出。这一项很小，但能让画面"活起来"。
### 2.2 构图
- 主体放在三分线附近，给左下角的标题和右侧的数据留出负空间。
- 侧栏或抽屉打开时，用 `camera.setViewOffset` 平移画面，而不是移动相机。主体在画面中的位置随之调整，透视不变。
- 主角镜头用微仰角：相机略低于主体中心，向上看 5–10°，让主体显得厚重、有力量；讲解镜头用 25–35° 的俯视。
- 每个镜头的画面里都要同时有亮部、暗部和高光；落定位置要能看到灯带在金属上的反射。不要选让主体一片死灰的角度。
### 2.3 镜头语言（必须做出以下镜头，每个都要在镜头表里写清楚）
1. **黑场光扫亮相**：全黑开场，一条灯带扫过，主体轮廓依次被高光勾出，然后相机从低机位缓慢推进约 15% 的距离。总长约 5 秒，同时出斜体衬线引文。
2. **环绕展示**：沿约 140° 的弧线绕主体半圈，略微升高，同时滚转。灯的反射在外壳上流动。
3. **爆炸拆解**：零件沿轴向分离的同时，相机后拉、升高约 20°，FOV 放宽 4°，全程保证所有零件都在画面内。零件按装配顺序依次飞出，每个零件延迟 80–120 毫秒，带轻微的减速回弹；螺钉先旋转再退出。

4. **平铺陈列（knolling）**：从爆炸状态切到俯视正交感的视角（FOV 收到 18°，相机升到正上方）。所有零件飞到地面上，排成整齐的网格，每个零件下方出现细线标注。这是产品片里很经典的镜头。
5. **微距对焦转移**：推到换向器和电刷的特写，FOV 18–22°，开景深。焦点从换向片拉到碳刷，用时约 1.2 秒，背景散焦成柔和的光斑。
6. **平行滑移**：贴着硅钢片叠层横向平移，叠片线从画面中滑过，前景和背景之间形成视差。
7. **剖切推进**：剖切面从外壳表面缓缓推进到中轴，相机同步侧移，保持剖面正对镜头。

8. **原位转场（真机 → 原理模型）**：相机不动，真实零件渐隐、示意线圈和磁极渐显，两者共用同一个转角。随后相机缓慢推近到线圈上。
9. **跟随旋转**：线圈转动时，相机以 0.3 倍的角速度跟着转，让线圈在画面中显得转得更慢、更易读。用户可以关闭跟随。
### 2.4 用户自由操作
- OrbitControls：`enableDamping`，`dampingFactor 0.06`，`rotateSpeed 0.55`，开启以光标为中心缩放；限制俯仰角和缩放范围。
- 双击某个零件：根据它的包围球算出合适距离，用 1.2 秒的弧线运镜推过去对准，背景零件变暗。
- 松手后相机不回弹；闲置 8 秒后，镜头微动和高光扫动重新渐入。
- 每个章节都提供"重置视角"，走一段弧线回到该章的默认镜头，不能瞬移。
---
## 第三章 验收方法（光泽和运镜都要用证据说话）
### 3.1 材质球测试场景（建模之前必须完成并让我确认）
- 在最终的摄影棚灯光下，把上面表格里的每种材质各做一个带倒角的测试件，排成一排：球体、带倒角的圆柱、带倒角的方块各一。
- 截取 3 张图：正面、45°、低机位。
- 逐项检查：
- 钢珠和抛光轴上能清楚看到灯带的形状；
- 拉丝件的高光是一条拉长的带，而不是一个圆点；

- 铜线有双层高光（清漆层和铜层）；

- 每个金属件都同时有接近纯黑的暗带和很亮的高光带；

- 没有任何一件看起来像灰色塑料。

不达标先调灯光和环境，再调材质，最后才动曝光。
### 3.2 运镜验收
- 使用虚拟时钟以固定 60fps 步进，导出开场 20 秒的逐帧截图（每 6 帧取 1 张拼成联系表）。
- 同时把每一帧的相机速度和角速度记录成曲线图。曲线必须平滑连续：没有尖刺，不跳到零，不超过速度上限。
- 打断测试：在运镜进行到一半时触发另一个镜头，检查速度曲线是否连续。

### 3.3 成片截图自查

每完成一章，都按 3.1 的标准检查一遍。另外检查：零件间是否有接触阴影；地面倒影是否若有若无；磁感线是否克制；画面里有没有卡片面板或霓虹光。
---
## 第四章 模型细节（工程级）
- 漆包线一匝一匝建模，沿槽绕出真实的线圈截面；端部要有鼓包、扎带和引出线，引出线焊在换向片的钩子上。
- 转子铁芯：真实槽形，槽数可选（3 / 5 / 12 槽），带斜槽；叠片线可见。
- 换向器：真实片数，片间有云母缝；电刷装在刷握里，后面有压簧。
- 外壳：安装孔、螺钉、蚀刻铭牌（型号、额定电压、转速）、通风孔、焊点。
- 轴承：带保持架的滚珠轴承；转轴末端加卡簧和键槽。
- 所有锐边倒角（见 1.4）。所有物体用合理的真实尺寸建模（小电机直径约 30–40mm，统一用毫米单位，或者整体缩放），否则灯光和 AO 的参数会失效。
## 第五章 科学可视化（克制的叠加层）

- **磁感线**：极细管线，颜色 `#9fc3e6`，透明度 0.5，沿 N→S 方向有缓慢流动的虚线纹理，必须穿过磁钢和铁芯。磁场越强，线越密、流得越快。磁感线不参与 Bloom。
- **电流**：沿导线流动的暖色小光点 `#ffcf8a`，光点密度和亮度正比于电流大小；换向瞬间光点方向要可见地翻转。
- **力**：白色哑光实体箭头，长度正比于力的大小。
- **电刷火花**：极小的暖白粒子，转速越高越明显，但要克制。
- **剖切**：用 clippingPlanes 剖开，stencil 盖帽。截面按材料着色，并加 45° 极淡的剖面线。
- **聚焦**：选中零件时，其余零件降到 15% 亮度并去饱和。
- **高速旋转**：高速时，换向片和槽口加角向运动模糊。
## 第六章 界面（编辑式纪录片 HUD）

- 页面底色 `#040507`；文字主色 `#f2f4f7`，正文 `.78`，次要 `.5`，最弱 `.3`，细线 `rgba(220,228,240,.16)`；唯一强调色为冰蓝 `#6fb2e6`。

- 字体：无衬线用 `"Helvetica Neue","Noto Sans SC","PingFang SC"`，标题字重 200–300；点缀用斜体衬线 `"Cormorant Garamond"`。
- 左下角放大号细体标题，上方是字间距加宽的 kicker（如 `04 —— DC MOTOR / TEARDOWN`），下方一行斜体引文（如 "Faraday, 1831"）。
- 右侧放右对齐的数字栈：转速、电流、电动势、转矩。
- 波形图：SVG 细线，无背景框，有一条与转子转角同步移动的竖线；中性面和换向点用虚线标注。
- 控件做成"文字链接 + 1px 滑杆"。零件用引线标注，标签跟随投影位置并做防重叠。提示做成底部的电影字幕。文字背后垫径向渐变 scrim。

- 不要卡片、不要毛玻璃、不要阴影。手机竖屏下，3D 区域占屏幕 60% 以上，讲解收进底部抽屉。
- 可选：用 WebAudio 合成电机声（基频随转速变化，叠加换向谐波和电刷噪声），默认静音。
## 第七章 教学内容
对应初中"电动机、磁生电"和高中"电磁感应、交变电流"，界面不写学段字样。核心理念：真机拆开看结构，原理模型看本质，两者原位切换。
1. **整机登场与拆解**：认识外壳、定子磁钢、转子铁芯、绕组、换向器、电刷、轴承、转轴。
2. **通电线圈为什么会转**：左手定则，有效边受力，力矩随转角变化；线圈在平衡位置停住，由此引出换向器。
3. **换向器**：慢放电流翻转的那一瞬间。换向片数可调（2 / 3 / 5 / 12），转矩波动曲线随之变平滑，真机的槽数和片数同步变化。
4. **影响转速和转向的因素**：电压、磁场、匝数、方向翻转，以及反电动势（转速升高时电流光点变稀）。
5. **磁生电**：右手定则；中性面；e = E_m·sinωt，E_m = NBSω。转速、磁场、匝数、面积四个滑杆，每个都同时改变波形和画面。
6. **交流与直流发电机**：滑环和换向器可以互换，正弦交流与脉动直流的波形实时对比；再拆一台真实的交流发电机。

7. **拓展**：无刷电机、三相发电机（三组线圈相差 120°）。
8. **随堂检测**：在 3D 里点选、判断方向、选波形，判分后用动画回放讲解。
**原则**：每个滑杆和开关都必须让 3D 画面产生肉眼可见的变化。
**物理要求**：用简化直流电机方程 U = E + IR、E = kω、T = kI，参数取真实小电机量级（3–12V、数千 rpm）。转角与波形严格同步。为以下关系写单元测试：中性面电动势为零；E_m 与 N、B、S、ω 成正比；换向前后力矩方向不变。

Die besten Ergebnisse erzielst du mit Gemini 4 Carbon.