playful-lab-3d

Playful Lab 3D

Turn outlines, articles, or product information into character-driven 3D web PPTs, and simultaneously export editable PPTX. Use three-color personas, exaggerated monsters, lab props, material contrast, and advertising-style composition; stay original and do not copy the characters, trademarks, packaging, or slogans of any reference brand.

Core principles

Assign personas first, then choose colors. Break the content into 2–4 character roles, such as host, analyst, challenger, lab technician. For each role, define body geometry, expression, actions, props, and a one-line slogan.
Set only one main faction color per page. Choose the main color from red, blue, and green; use the other two colors only as small-area accents. Keep at least 35% warm white negative space.
Let characters carry informational tasks. Characters must point to, hold up, chase, observe, or operate the concepts on the page; it is forbidden to treat characters as corner decorations.
Mix materials rather than using uniform clay. On each page, combine two of soft rubber, matte clay, plush, and a small amount of metal, avoiding degeneration into a recolor of Curious Jelly 3D.
Preserve exact copy. All titles, body text, numbers, and labels go in #txt as real HTML; it is forbidden to bake exact copy into images or WebGL.
Explicitly register objects for PPTX. For Three.js objects that need to move independently in PowerPoint, call registerPptx3D(object, id, { pages })。

Workflow

1. Build a content role table

List the responsibilities and visual persona of each content role:

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

Keep 2–4 recurring characters. The cover may show three factions in the same frame; regular content pages highlight only one faction.

2. Plan pages and pacing

Decide the number of pages based on the content; do not fix it at 8 or 20 pages. Use references/layout-patterns.md the eight skeleton types in. Recommended pacing:

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

Avoid using the same main color or the same composition for three consecutive pages. Arrange a high-negative-space manifesto page every 3–4 pages.

3. Choose the asset production line

Create Three.js objects for rotatable, reassemblable tools and devices: hoses, eyeballs, capsules, teeth, flasks, tracks, board-game stages, giant tools.
Call real image models for complex original characters. First write a separate brief, then generate an original image on a white background, remove the background, verify RGBA, transparent margins, and a complete outline, and finally add it to the picker.
It is forbidden to pass off procedural Three.js screenshots as image-model-generated assets.
It is forbidden to package or distribute characters, logos, packaging, or commercial images from reference websites.

Read references/character-system.md and references/image-prompts.md to complete the original character design.

4. Build the HTML Deck

From demo.html copy the runtime and replace PAGES content. Keep the following DOM:

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

Use paused, seekable deterministic animation. Support screenshots and export:

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

5. Register 3D objects

Expose:

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

Registration example:

registerPptx3D(heroGroup, 'hero-monster', { pages: [0, 3] });
registerPptx3D(toolGroup, 'diagonal-tool', { pages: [0] });

Register groups for whole-object editing; register child objects when split-part editing is needed. Keep lights, shadows, floor, and environment unregistered so they remain in the background layer.

6. Visual and technical QA

Read references/checklist.mdAt minimum, check:

At 1600×900, all pages have no cropping;
The three-color personas are clear and each page has only one main faction;
Character silhouettes can be understood within 1 second;
Copy is not baked into images;
still=1 is consistent with the final state of normal animation;
The WebGL console has no errors;
It is still browsable on mobile;
Reduced motion preferences are respected.

7. Export editable PPTX

Run:

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

The currently shared exporter works from runtime metadata and does not depend on the number of Haoqi pages or object names. Verify the PPTX page count, real text boxes, independent image objects, and native shapes, and re-render the cover, data pages, and ending page.

Output requirements

Deliver at the same time:

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

Explain the editable boundaries: HTML copy is real text; registered 3D subjects and transparent characters are independent images; supported color blocks, checkerboards, and lines are native shapes; real-time materials, lighting, and shadows remain in the background.

Resources

README.md: style positioning and usage
design-tokens.json: color, material, scale, and motion tokens
references/visual-language.md: complete visual language
references/character-system.md: character design protocol
references/layout-patterns.md: eight page skeletons
references/image-prompts.md: original character prompt recipe
references/motion-system.md: four types of deterministic motion
references/checklist.md: delivery checklist
PPTX_EXPORT_PROTOCOL.md: editable export protocol