jane-xiaoer 顽趣实验室 3D · Playful Lab 3D
把大纲、文章或产品信息转成角色驱动的 3D 网页 PPT，并同时导出可编辑 PPTX。采用三色人格、夸张怪物、实验室道具、材质反差和广告式构图；保持原创，不复制任何参考品牌的角色、商标、包装或标语。
核心原则
- 先分配人格，再选颜色。 将内容拆为 2–4 个角色职责，例如主持人、分析师、挑战者、实验员。为每个职责定义身体几何、表情、动作、道具和一句口号。
- 一页只设一个主阵营色。 从红、蓝、绿中选择主色；另外两色只作小面积强调。保持至少 35% 暖白留白。
- 让角色承担信息任务。 角色必须指向、托举、追逐、观察或操作页面中的概念；禁止把角色当角落摆件。
- 混合材质而非统一黏土。 每页组合软胶、哑光黏土、毛绒和少量金属中的两种，避免退化为好奇果冻 3D 的换色版。
- 保留精确文案。 标题、正文、数字和标签全部放在
#txt中作为真 HTML；禁止把精确文案烤入图片或 WebGL。 - 为 PPTX 明确注册对象。 对需要在 PowerPoint 中独立移动的 Three.js 对象调用
registerPptx3D(object, id, { pages })。
工作流
1. 建立内容角色表
列出每个内容角色的职责和视觉人格：
角色 ID / 内容职责 / 主色 / 身体几何 / 标志器官 / 动作 / 道具 / 口号
保持 2–4 个持续出现的角色。封面允许三个阵营同框，普通内容页只突出一个阵营。
2. 规划页面和节奏
根据内容决定页数，不固定为 8 或 20 页。使用 references/layout-patterns.md 中的八种骨架。推荐节奏：
集合封面 → 宣言 → 角色/章节 → 数据或流程 → 反差页 → 产品舞台 → 总结阵容
避免连续三页使用同一主色或同一构图。每 3–4 页安排一页高留白宣言页。
3. 选择资产生产线
- 为可转动、可重组的工具和装置创建 Three.js 对象：软管、眼球、胶囊、牙齿、烧瓶、轨道、棋盘舞台、巨型工具。
- 为复杂原创角色调用真实图片模型。先写独立 brief，再生成白底原图，移除背景，验证 RGBA、透明边距和完整轮廓，最后加入 picker。
- 禁止把程序化 Three.js 截图冒充图片模型生成资产。
- 禁止从参考网站打包或分发角色、Logo、包装和商业图片。
读取 references/character-system.md 与 references/image-prompts.md 完成原创角色设计。
4. 构建 HTML Deck
从 demo.html 复制运行时并替换 PAGES 内容。保持以下 DOM：
<canvas id="cv"></canvas>
<div id="frame">…结构与导航…</div>
<div id="txt">…真文字…</div>
<div id="stk">…独立 PNG/SVG 素材…</div>
使用暂停、可 seek 的确定性动画。为截图和导出支持：
?p=0 指定页码
&still=1 停止动画并显示最终状态
&export=background
&export=object&object=<id>
5. 注册 3D 对象
暴露：
window.__PPTX_EXPORT__ = {
version: 1,
pageCount: () => PAGES.length,
objectsForPage: pageIndex => [],
apply: pageIndex => {}
};
注册示例：
registerPptx3D(heroGroup, 'hero-monster', { pages: [0, 3] });
registerPptx3D(toolGroup, 'diagonal-tool', { pages: [0] });
注册 Group 以整体编辑；需要拆件编辑时注册子对象。保持灯光、阴影、地板和环境未注册，使其留在背景层。
6. 视觉与技术 QA
读取 references/checklist.md。至少检查：
- 1600×900 下全部页面无裁切；
- 三色人格清晰且每页只有一个主阵营；
- 角色轮廓能在 1 秒内读懂；
- 文案没有烤进图片；
still=1与正常动画最终状态一致；- WebGL 控制台无错误；
- 移动端仍可浏览；
- 减少动态偏好得到尊重。
7. 导出可编辑 PPTX
运行：
python3 scripts/export-haoqi-pptx-editable.py \
styles/playful-lab-3d/demo.html \
-o playful-lab-3d-editable.pptx --scheme plus
当前共用的导出器按运行时元数据工作，不依赖 Haoqi 页面数量或对象名称。验证 PPTX 页数、真文本框、独立图片对象和原生形状，并回渲封面、数据页和结尾页。
输出要求
同时交付：
deck.html
deck-editable.pptx
预览联系表
资产清单
说明可编辑边界：HTML 文案为真文本；注册 3D 主体和透明角色为独立图片；支持的色块、棋盘、线条为原生形状；实时材质、灯光和阴影保留在背景中。
资源
README.md：风格定位与使用方式design-tokens.json：颜色、材质、尺度和动效 tokenreferences/visual-language.md：完整视觉语言references/character-system.md：角色设计协议references/layout-patterns.md：八种页面骨架references/image-prompts.md：原创角色提示词配方references/motion-system.md：四类确定性动效references/checklist.md：交付检查清单PPTX_EXPORT_PROTOCOL.md：可编辑导出协议