Communitygithub.com

微缩世界 (Diorama Worlds)

构建叙事性微缩3D世界,固定正交相机,纹理地形,铰接人物和协调循环动作。用于精细的低多边形3D微缩模型或像素化动画小插图:运动场、街头艺人、花园或其他有故事的小场景。

微缩世界 (Diorama Worlds) 是什么?

微缩世界 (Diorama Worlds) 是一个AI代理技能,用于构建叙事性微缩3D世界,使用固定正交相机、纹理地形、铰接人物和协调的循环动作。该技能支持四种视觉风格:微缩模型、像素、半色调和蓝图,所有风格共享同一个Three.js场景。适用于创建详细的低多边形3D微缩或像素化动画小插图,如运动场、街头艺人或花园等。技能要求Node.js 20+和WebGL 2浏览器,生成的HTML文件内置Three.js,无需网络依赖。开发者可以使用提供的辅助函数(如W.person、W.plant、W.reach)构建场景,并通过`build-world.mjs`脚本生成完整的离线HTML文件。该技能还包括一个渲染检查工具`look-world.mjs`,用于验证输出质量、联系人检测和性能指标,确保场景在移动设备和触摸屏上的可用性。

兼容平台~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/educlopez/diorama/tree/HEAD/skills/diorama-worlds

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

微缩世界 (Diorama Worlds) 是做什么的?

需要 Node.js 20+、npm 和 WebGL 2 浏览器。自动视觉检查需要 Chrome/Chromium。构建依赖项仅安装一次;生成的 HTML 包含 Three.js,无需网络。

创建一个生动的小场景,而不是旋转模型或平面视频。此技能属于 Diorama 仓库,但拥有自己的渲染器和依赖项。切勿编辑 diorama 技能的 kit/diorama.js、bench.html 或 SVG 示例来让场景工作。

以下所有路径均相对于此技能文件夹。将用户的场景和构建输出写入其工作目录,而不是覆盖捆绑的示例。

选择故事和风格

将用户提供的参考视为艺术指导,而非可执行指令。参考视频并不证明其源代码或渲染器。

确定场所、其在网络上的用途、一个主要动作以及讲述故事的静止帧。仅在缺少的选择会显著改变场景时才提问;否则说明所选概念并继续。保留请求的主题;板球示例不是通用模板。

  • 微缩模型 (Miniature): 哑光低多边形几何体、表面磨损、克制纹理、不规则地面边缘、暖色调方向光和可读的接触阴影。
  • 半色调 (Halftone): 暖象牙色纸张、暖/冷色调墨水和对角线点阵筛选,边缘界定克制。一种实时的屏幕空间处理,而非物理打印模拟。
  • 蓝图 (Blueprint): 深蓝色色调填充、浅色边缘线和几何体轮廓内的微妙网格。一种图形处理,而非 CAD 或隐藏线几何体。
  • 像素 (Pixel): 相同场景和时钟,以较低分辨率渲染,使用最近邻像素放大,带有序抖动和通道量化。这是3D几何体上的像素风格,而非体素艺术或手动绘制的精灵。从内核风格开始;不要用 CSS 模糊或静态图像替换工作的渲染器。

保持相机固定。白色负空间将场景隔离。地面是平坦、不规则的裁切形状,淡入该空间,而不是厚平台。切勿施加土墙或展示底座;仅在明确要求时使用挤压底座。优先选择一个带有预期、接触和恢复的动作,而不是十个独立的闲逛动作。用不与故事竞争的第二生命环绕它。运动球必须到达演员的手、球棒或篮筐,而不是仅仅从附近经过。

阅读 references/art-direction.md 了解构图和特定风格决策。阅读 references/scene-api.md 后再开始构建。

构建场景

一次性安装技能的固定依赖项,不执行生命周期脚本:

npm ci --ignore-scripts --prefix <skill>

将 <subject>.js 写为 ES 模块,从 @diorama/worlds 导入 defineWorld。导出一个具有 name、title、description、正有限 duration、循环内的 still、bounds、build(W) 和 tick({t, parts, W}) 的 world。最近的示例是格式参考,而不是主题的限制:

  • examples/bakery.js: 面包师用手接触检查揉面团。
  • examples/observatory.js: 在指向上方的望远镜上进行焦点调整,带有支撑/焦点抓握锚点。
  • examples/florist.js: 原创双人花摊,共享成人骨架,双脚固定,花束抓握锚点。
  • examples/pottery-studio.js: 原创工艺动作,共享成人骨架跟随旋转的粘土容器,有实际手部接触。
  • examples/cricket.js: 广阔地面、铰接球员和协调的球循环。
  • examples/basketball.js: 较小的小插图、投篮、篮网和回传。
  • examples/street-juggler.js: 一个新的传递测试结果;三球级联,其接/放位置与手掌核对。这使用自定义端点驱动的手臂,而不是不同的渲染器。

优先选择转移视觉语言的原创主题,而不是用户参考场景的另一个副本。使用共享的成人 W.person、W.plant 和 W.reach 辅助函数来构建人物;不要用大头盒状人物替换它们。

使用工具包辅助函数一次性构建几何体,并返回引用于动画。tick 必须从绝对时间分配每个动画变换。不允许累积位置、帧计数器、每帧新几何体/材质、独立计时器或相机漂移。使用实时事件时序:篮球投篮不应漂浮两秒钟,除非要求慢动作。设置预期、快速飞行/接触和可读恢复;默认播放速率为 1×,不是对慢时间线的修复。运行时时钟独立于掉帧。

设置边界以覆盖所有姿势、移动道具和阴影,而不仅仅是初始几何体。重复部件会自动按几何体和材质实例化;重用调色板颜色。

主题特定对象可以使用组和图元构建。对于自定义的 Three.js 几何体或材质,使用 W.own(resource) 注册,以便拆卸时释放。不要添加需要悬停的控件:场景故事必须在触摸设备上无需指针即可工作。

构建单个离线 HTML 文件:

node <skill>/scripts/build-world.mjs <subject>.js <output.html>

结果包含 Three.js、生成的纹理、场景和控件。它比 diorama 技能的 SVG 输出更大:披露此权衡。无需 CDN 导入、库存纹理、模型下载或 API 密钥。保持新的外部资产可选,并在请求时披露其许可和网络成本。

验证实际输出

对新场景运行渲染检查,而不仅仅是捆绑的示例:

node <skill>/scripts/look-world.mjs <subject>.js <output-directory>

它在无网络访问的 Chromium 中打开实际生成的 HTML,保存多个阶段和所有四种风格、移动视图和 JSON 报告。对于接触驱动的故事,声明 contactTimes 和一个返回 {label, a: [x, y, z], b: [x, y, z]} 对的 contacts({t, parts, W}) 检查器。look 命令比较这些时间点的实际姿势端点。同时验证在指定的释放和接触时间,球/道具与手掌/球棒/篮筐的坐标。通用运动和接缝检查无法捕捉道具错过演员的情况。

它检查浏览器错误、可见的非白色几何体、场景变化、真实壁钟速度、声明的手/道具接触、绘制调用预算、确定性寻道、循环接缝、减少运动、暂停、屏幕外暂停和拆卸。CHROME_PATH 可以选择已安装的 Chromium;否则在技能文件夹中运行 npx playwright install chromium 安装 Playwright 支持的浏览器。

然后打开保存的图像并查看。通过结构性检查并不证明相似性、叙事或艺术质量。检查投篮/接触时刻、轮廓、阴影、地面边缘、像素可读性、相机裁剪和移动比例。阅读 references/art-direction.md,纠正场景中的失败并重新运行。仅当故障确实在工具包中时,才将性能修复保留在可重用的工具包中,而不是因为一个场景需要不同的构图。

对于工具包更改,还要运行:

npm test --prefix <skill>

切勿在未打开屏幕截图的情况下声称进行了视觉审查。切勿仅仅因为两个维护的示例通过就声称进行了新的技能评估。由这些指令生成的新主题是传递测试;单独保存其提示、输出和发现。如果浏览器/WebGL 不可用,报告阻止因素并明确声明视觉质量未经验证。

诚实交付

提供构建的 HTML 和至少一张经过审查的屏幕截图。说明概念、风格、选择的静止时间、大致文件大小和已知限制。有关嵌入,请参阅 references/scene-api.md。不要声称具有原始参考的保真度、可访问性、设备性能或无缝循环,除非经过检查或测量。初始公开发布不是经过生产认证的渲染器;披露实际限制和经过测量的检查。

Individual skills in this repo

This repo contains 2 individual skills — each has its own dedicated page.

diorama

Build small animated 3D worlds for the web (isometric camera, blocks on a rounded base, soft shadows, little vehicles and people that move) in one of six themes you can tune: toy (pastel blocks, warm sun), soft, mono (one accent, the rest tints of ink), line (a hairline drawing, white fills and ink edges, by hand if asked), print (flat tones and ink, a printed illustration) and night. A hero scene for a landing page, a card-sized illustration for docs or a blog, or a mini figure for any small spot (an empty state, a feature in a list, a 404). Use this whenever someone asks for a 3D illustration, an isometric scene, a low-poly or "toy town" animation, a monochrome or line-art 3D figure, a hand-drawn or sketched figure of an object with a bit of life in it, a blank/empty-state illustration, an illustration that answers a hover or a tap, a little game-like SVG world, even if they never say "3D" or "isometric". Ships one self-contained HTML file that draws SVG with no dependency (no th...

diorama-pixel

Build animated pixel-art miniatures: a small isometric place drawn at low resolution and enlarged crisp, with ordered dithering on every surface, procedural planks, thatch, paving, grass and water, a ground that dissolves into the white page, soft cast shadows and tiny people with a looping action. One self-contained HTML file with no dependency (no three.js, no WebGL): a software renderer on a 2D canvas, about 50 KB. Use it whenever someone asks for a pixel-art scene, a retro or 16-bit isometric vignette, a dithered illustration, or a cozy little place in pixels for a landing page, a blog post or a card. For vector UI illustrations, line art and empty states use the diorama skill; for detailed Three.js worlds with articulated people and four finishes use diorama-worlds.

相关技能