我做了什么
一个零构建、单 HTML 文件的 3D 月饼交互 Demo——「月饼解构实验室」：
- 7 大门派月饼全部可玩：广式莲蓉蛋黄、经典五仁、豆沙、流心奶黄、冰皮芋泥、玫瑰鲜花、苏式枣泥；
- 点「解构展开」，月饼沿中轴逐层悬浮拆开：饼皮 → 馅料 → 咸蛋黄 / 流心芯 / 酥皮层，每层带名称、口感描述与色卡；
- 点「剖面视图」，像切月饼一样看到内部切面贴图（皮的分层、馅的质感、蛋黄的起沙油光）；
- 每块月饼标注热量估算（约 150–230 kcal / 块）与“要消耗它需要走多久”，吃之前先心里有数；
- 全程可 360° 拖拽旋转、缩放，自动环绕展示。
灵感来自什么真实场景
自发参与，灵感来自每年中秋的餐桌现场：
一盒月饼拆开，莲蓉的、五仁的、流心的摆一桌，亲戚们各执一词“哪种好吃”。但你从来没法直接看到一块月饼内部到底分层是什么、蛋黄藏在哪、苏式的“层层起酥”到底几层、吃一块到底多少热量。
与其看包装袋上的配料表小字，不如把月饼真的拆开——这就是这个 Demo 的出发点：把“好奇心 + 选择困难 + 热量焦虑”三个中秋餐桌真实问题，做成了一个能上手玩的页面。
它解决了什么假期问题
| 假期痛点 | Demo 里的答案 |
|---|---|
| 月饼盲选：送礼/自吃不知道每种里面是什么 | 7 类型逐层解构，皮/馅/芯一目了然 |
| 苏式 vs 广式之争没有直观依据 | 苏式 4 层起酥 vs 广式薄皮厚馅，拆开即见 |
| “这块多少卡？吃两块会不会……” | 每类型 kcal 估算 + 运动消耗换算 |
| 假期家庭聚会的低门槛谈资 | 转盘展示 + 剖切 + 展开动画，老人小孩都能玩 |
作品截图
合拢态（左）× 解构展开态（右）：
苏式枣泥（层层起酥，展开后 4 层酥皮 + 枣泥芯 + 顶酥）与剖面视图：
技术亮点（也是这次 VibeCoding 最有意思的部分）
- 单 HTML 文件交付：无打包器、无 npm，Three.js 走 CDN importmap——收到的文件双击就能打开，发微信传文件就能分享；
- 零照片素材：饼皮油润光泽、酥皮碎屑、莲蓉起沙、蛋黄砂感，全部是 canvas 程序化生成的贴图 + Sobel 法线浮雕（跑在 Web Worker 里不卡 UI）；
- 自己给自己出题的验证闭环：页面内置
?verifyall=1全量自检——7 类型 × 合拢/展开 14 组状态逐一断言“各层不越出视口、内芯不穿透外壳”，无头浏览器跑 14/14 通过才算完； - 性能三板斧：相机绕固定场景公转 → 阴影贴图按需刷新（关掉每帧 2048² 重算）；空闲限帧 30fps；弱机自动两级降级（先降像素比、再关阴影）+ 标签页隐藏自动暂停。手机/集显本也流畅转。
体验方式
作品为单 HTML 文件（附件见本帖下方 / 或站内信找我要）。下载后双击打开即可（需联网加载 Three.js CDN）。推荐 Chrome / Edge。
demo-C3-月饼3D.html (475.5 KB)
操作：底部切换 7 种月饼 → 拖拽旋转 / 滚轮缩放 → 「解构展开」看分层 → 「剖面视图」看切面。
用 TraeCode 创作的关键过程
- 性能战役：打开即 CPU 拉满 → 定位到阴影贴图每帧无谓重算 → 改按需刷新 + 限帧 + 自适应降级，验收标准全程是“14/14 自检通过 + 观感回归不劣化”；
- 每步改动都跑同一套无头验证（数值断言 + 截图比色）守回归，没有一次“改好了这个、改坏了那个”上线。
TraeCode 创作过程截图：
