# 八宝粥蓝图动画 v3 / Revision 03：先三帧，再运动

六个视频片段各有开始、关键动作、完成三帧，共 18 帧；中英文各导出一份，共 36 个 SVG。分镜页为 /porridge/storyboard/，播放器为 /porridge/。原视频与旧版图形保留，效果图不是截图贴进网页，而是动画的同一套矢量模型。

## 本次空间与机构重做

Revision 03 将遮挡改为三维空间面片的 BSP 切分与排序，不再只按整个零件的中心远近排列。开放料斗、双层灌装转台、卷封头、釜筒和箱体都采用同一空间模型。主要改动为：

- 投料：开放料斗具有内壁和料床；滑闸、驱动杆、出料口与开放罐口连接、对齐。
- 灌装：中心主轴承接共轴的上盘与下转台，悬挂灌装头安装在上盘；罐体落在下转台，软管接入盘上的阀体。
- 卷封：双立柱机架承接桥架、主轴、压头与双滚轮滑臂。底盖落座和压紧后，第一道滚轮成形，第二道压实，滚轮顺序进入并退回。
- 入釜：初始整车在门前，车轮位于同一双轨；真实空心筒壁决定入釜遮挡。门朝釜口外侧（+X）打开。车架入釜后，门前伸缩轨道先撤回，短桥绕内轨端向釜内折下，釜门再从外侧绕固定侧铰链合拢；轮盘始终在门的平面内，关门后转轮盘锁紧，再显示循环。门面与轮盘共用 `retortDoorTransform` 的基向量，改变开门方向时须同步改变门法向，并重新检查轨道的扫掠净空。
- 装箱：固定横梁、移动滑座、伸缩杆和六点吸盘抓手相连。六罐保持三列两排，先抬升、横移，再落入有壁厚的箱内；工具抬开后，短端盖先闭，前后大盖后闭。

## 文件分工

- lib/porridge-storyboard.ts：六工序、中英文内容、视频约略时间、动作提示。
- lib/porridge-keyframes.ts：每段三帧的 BlueprintPose，及 blueprintPoseAt 的动作顺序。
- lib/porridge-projection.ts：三维点、圆周、等轴测投影、固定相机。
- lib/porridge-solid-model.ts：空间面片、罐内腔、圆柱、盒体、线段与颗粒。
- lib/porridge-depth.ts：BSP 平面切分、面片排序及线段/颗粒的深度位置。
- lib/porridge-feed-scenes.ts：制罐、开放料斗、共轴灌装转台。
- lib/porridge-mechanical-scenes.ts：底盖双道卷封与入釜、关门、轮盘锁紧。
- lib/porridge-packing-scene.ts：有壁厚的箱体、四盖、连接的六点抓手与转移动作。
- components/porridge-blueprint.tsx：空间模型的 SVG 绘制、点阵背景、谷物轮廓及标注。
- components/porridge-figure.tsx：把播放器进度映射到上述同一模型。
- components/porridge-lab.tsx：播放、暂停、拖动、关键帧按钮、参数、导出。
- app/porridge/storyboard/page.tsx：18 帧对照、放大、SVG 下载。
- public/porridge-keyframes/：960 × 640 中英文矢量效果图。
- docs/porridge-three-frame-design.md：几何与分镜约定。
- scripts/export-porridge-keyframes.mjs：从同一渲染器再导出36份效果图。
- scripts/check-porridge-geometry.mjs：检查空间面片、原轮廓、关键姿态和关门/锁门前置关系。

## 统一空间关系

世界 X、Y 是水平面，Z 是高度。相机不转动，同场景三帧比例固定：

screenX = originX + (X−Y) × √3/2 × scale
screenY = originY + ((X+Y)/2−Z) × scale

圆周从三维平面构造后再投影，所以罐口、转盘、车轮和釜门的椭圆来自各自所在平面。盒面和管路也使用同一套坐标。引线末端由三维锚点投影，文字留在固定区。

可见面先按相机视向剔除背面，纸箱折页等薄片保留双面。BSP 将跨越分隔平面的面片和线段切开，再从后向前绘制；新切边不额外描线，避免把分隔痕迹画成零件接缝。颗粒按三维位置进入相同深度树。实体面采用纸色覆盖后方图元，液体单独设置半透明。内部信息通过明确的局部剖视或真正的开口展示，而不是把罐口画成封闭的椭圆盖。相邻线段仅在样式和遮挡顺序一致时合并，减少渲染节点。

## 三帧变成动画

播放器 p 从 0 到 1。关键帧分别位于 p=0、0.43、0.86；0.86–1 保持完成状态，然后开始下一循环，不倒放焊接、卷封或热处理。点击三个关键帧按钮会暂停并定位。

blueprintPoseAt 返回 curl、weld、gate、level、lid、door、lock、flaps 等姿态参数。固定设备尺寸不随进度改变。每个动作在自己的时间窗口用 smoothStep 插值，并满足先后关系：

1. 金属片卷圆完成后才沿纵缝焊接。
2. 计量闸开启后才落粒，落粒停止后关闸。
3. 底盖落座后压紧；第一道滚轮成形，第二道滚轮压实并退回。
4. 车架入釜后关门，门完全闭合后转轮盘锁门；锁门后显示热处理。
5. 六点抓手先把罐组抬离输送台，再横移与下降；罐组落入箱内、抓手抬开后，四片盖沿固定铰接边顺序折合。

所有动画都由一个 p 驱动，没有独立 CSS/SMIL 图形时间轴，因此暂停与拖动能同步所有零件。颗粒使用固定序列，回到同一进度可得到同一画面。

## 如何修改自己的图案

先调整 lib/porridge-keyframes.ts 的三帧姿态。改零件时编辑三个场景模块中的世界坐标，不要分别猜三帧的屏幕坐标。空间模型 API 中，圆罐用 can、框架用 box、管路用 line、圆周用 ring、任意面用 face；釜门与车轮用 orientedDisc 设置各自平面的基向量。纸箱折页与釜门围绕固定轴旋转。

新增零件要先确定轴线、支撑面、连接端口和扫掠净空，再添加面片。薄片若需双面可见，可设 twoSided；箱体和筒体应保留真实内腔。尺寸是图解坐标单位，例如当前装箱罐半径 15、高 46，间距 36×42；箱内 120×84、壁厚 2，不能把这些数值当作工厂图纸。

再修改 blueprintPoseAt 中的时间窗口，同时更新 porridge-storyboard.ts 的阶段文字。最后对照 0、0.43、0.86 三帧并检查中间姿态的遮挡、同轴、端口连接和动作顺序。

播放器可改颜色、线宽、时长、速度和点阵；JSON 导出供手动应用到代码，不自动改写文件。SVG 导出是静态效果图，动态逻辑保留在 React 源码。独立 SVG 中的文字会使用本机字体回退；精准字体外观可在矢量编辑器安装相同字体或将文字转轮廓。

## 视频依据与范围

010 制罐 00:06–00:23；011 投料 00:45–01:09；012 配液/灌装 01:09–01:29；013 封底 01:29–01:33；014 热处理 01:33–01:53；015 包装 01:56–02:11。时间均为约略位置。

视频中易拉端已封好，开放底口朝上填料，再封底、热处理。机械形状、卷封动作、六点抓手、锁门联动和颗粒数量为结构与动作示意。新增的执行机构用于解释动画中的连接和运动，不表示视频设备的精确复制。图解不提供生产尺寸、温度、压力或时间参数。

## 验证与发布

Revision 03 已检查84个姿态，没有无效坐标、退化面、新增误描切边、丢失原轮廓或三帧漂移。36份中英文下载SVG的几何与标注和网页一致，18个动画关键姿态和下载图一致。390px页面无横向溢出，图内放大滚动、弹窗、播放、关键帧定位和导出内容通过，类型检查和生产构建通过。具体证据及浏览器导出自动保存的限制见 docs/porridge-v3-verification.md。

系统减少动态效果默认暂停；离开视口/切到后台暂停推进。手机上放大图内可滚动，页面本身保持适配。

修改模型后运行 npm run check:porridge，再运行 npm run export:porridge，同步36份下载图。类型检查用 npx tsc --noEmit；生产打包用 npm run build。本地预览用 npm run dev -- --host 127.0.0.1 --port 3000。
本地修改完成后，按现有部署流程发布，浏览器本地预览不代表公网域名已更新。

## 历史说明

v1 为最初的简化图形；v2 建立固定投影、三帧共用模型及比例复核，但部分遮挡仍依赖手工绘制顺序，并用分解图省略装箱执行机构。Revision 03 保留三帧与统一时间轴的做法，改用空间面片/BSP 遮挡，并补上连接的卷封、装箱和锁门机构。旧版记录和原视频保留，本说明不把历史验收结果作为新版本的验证结果。