基于 Three.js 的像素风立体场景构建与 QA 方法
利用 Diorama 剧本与代码套件，在 Three.js 中构建锁相相机、调色板吸附、有序抖动及墨水轮廓的像素风立体场景。通过确定性纯函数场景设计与每实体帧 QA 保证视觉效果，实现可验证的截图与动画。
GitHubsloemo01225GitHub Star
Three.jsesbuildplaywright-coregitcurl
收录于 2026-11-01 · 原文发布于 2026-10-30
要点
- 采用研究优先的构建工作流：在建模前填写 DESIGN.md 设计表与 SOURCES.md 研究日志。
- 保持视觉契约：使用锁定的四分之三视角相机、白色背景上的扁平剪影、64 色调色板、有序抖动和墨水轮廓。
- 确保场景完全确定性：场景必须是时间 t 的纯函数，使得任意帧都可以被冻结、截图并进行比对。
- 执行每实体帧 QA：利用 verify/ 目录下的 QA 脚本和工具对构建结果进行验证，确保截图作为确凿证据。
- 按需复制模块：从 templates/ 中复制所需模块到项目中，而不是直接编辑安装好的副本。
.cursorrules
- 遵循 research-first 构建工作流，建模前先完成研究和设计表填写。 - 保持场景确定性，使其作为时间 t 的纯函数，便于冻结帧和 QA 截图比对。 - 采用固定规范：锁定三四分之三相机、64色调色板、有序抖动、墨水轮廓。 - 使用 templates/ 中的模块进行组装，而不是随意编写不合规范的代码。
可复制提示词
请按照 Diorama プレイbook 的规范为我构建一个像素风立体场景。要求使用 Three.js，实现锁定四分之三相机、64 色调色板吸附、有序抖动和墨水轮廓。场景需作为时间 t 的纯函数，确保确定性。请先研究并填充 DESIGN.md，然后通过确定性动画管道构建场景，最后运行 QA 脚本进行验证。主题为：[在此输入场景主题，例如：pool / night market / bank job / arena battle]。
#Three.js#像素风#AI前端美化#动画QA
相关方法
内容由 AI 依据原文翻译整理，细节以原帖为准；版权归原作者。