微缩世界 (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。不要声称具有原始参考的保真度、可访问性、设备性能或无缝循环,除非经过检查或测量。初始公开发布不是经过生产认证的渲染器;披露实际限制和经过测量的检查。