Playful Lab 3d

顽趣实验室 3D · Playful Lab 3D

把大纲、文章或产品信息转成角色驱动的 3D 网页 PPT，并同时导出可编辑 PPTX。采用三色人格、夸张怪物、实验室道具、材质反差和广告式构图；保持原创，不复制任何参考品牌的角色、商标、包装或标语。

核心原则

1. 先分配人格，再选颜色。 将内容拆为 2–4 个角色职责，例如主持人、分析师、挑战者、实验员。为每个职责定义身体几何、表情、动作、道具和一句口号。
2. 一页只设一个主阵营色。 从红、蓝、绿中选择主色；另外两色只作小面积强调。保持至少 35% 暖白留白。
3. 让角色承担信息任务。 角色必须指向、托举、追逐、观察或操作页面中的概念；禁止把角色当角落摆件。
4. 混合材质而非统一黏土。 每页组合软胶、哑光黏土、毛绒和少量金属中的两种，避免退化为好奇果冻 3D 的换色版。
5. 保留精确文案。 标题、正文、数字和标签全部放在 #txt 中作为真 HTML；禁止把精确文案烤入图片或 WebGL。
6. 为 PPTX 明确注册对象。 对需要在 PowerPoint 中独立移动的 Three.js 对象调用 registerPptx3D(object, id, { pages })。

工作流

1. 建立内容角色表

列出每个内容角色的职责和视觉人格：

textCopy code
角色 ID / 内容职责 / 主色 / 身体几何 / 标志器官 / 动作 / 道具 / 口号

保持 2–4 个持续出现的角色。封面允许三个阵营同框，普通内容页只突出一个阵营。

2. 规划页面和节奏

根据内容决定页数，不固定为 8 或 20 页。使用 references/layout-patterns.md 中的八种骨架。推荐节奏：

textCopy code
集合封面 → 宣言 → 角色/章节 → 数据或流程 → 反差页 → 产品舞台 → 总结阵容

避免连续三页使用同一主色或同一构图。每 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：

htmlCopy code
<canvas id="cv"></canvas>
<div id="frame">…结构与导航…</div>
<div id="txt">…真文字…</div>
<div id="stk">…独立 PNG/SVG 素材…</div>

使用暂停、可 seek 的确定性动画。为截图和导出支持：

textCopy code
?p=0       指定页码
&still=1   停止动画并显示最终状态
&export=background
&export=object&object=<id>

5. 注册 3D 对象

暴露：

jsCopy code
window.__PPTX_EXPORT__ = {
  version: 1,
  pageCount: () => PAGES.length,
  objectsForPage: pageIndex => [],
  apply: pageIndex => {}
};

注册示例：

jsCopy code
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

运行：

bashCopy code
python3 scripts/export-haoqi-pptx-editable.py \
  styles/playful-lab-3d/demo.html \
  -o playful-lab-3d-editable.pptx --scheme plus

当前共用的导出器按运行时元数据工作，不依赖 Haoqi 页面数量或对象名称。验证 PPTX 页数、真文本框、独立图片对象和原生形状，并回渲封面、数据页和结尾页。

输出要求

同时交付：

textCopy code
deck.html
 deck-editable.pptx
预览联系表
资产清单

说明可编辑边界：HTML 文案为真文本；注册 3D 主体和透明角色为独立图片；支持的色块、棋盘、线条为原生形状；实时材质、灯光和阴影保留在背景中。

资源

• README.md：风格定位与使用方式
• design-tokens.json：颜色、材质、尺度和动效 token
• references/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：可编辑导出协议