Repolode
提交项目
sloemo01

sloemo01/diorama

用于构建像素风微缩场景的 Three.js 工作流与代码模板，包含固定镜头、调色板量化和逐帧质量检查。

在 GitHub 查看
Star
350
Fork
23
未关闭 Issue
0
最近提交
10小时前

这是什么？

Diorama 是一套用于在 Three.js 中制作像素风微缩场景的工作流说明与可复制代码模板。场景固定在一块底座上，从锁定的四分之三视角拍摄，使用 64 色调色板、有序抖动、墨线轮廓和玩具比例的动画人物。仓库的核心是 SKILL.md，它单文件涵盖调研优先的制作流程、画面与动画标准、渲染管线和质量检查方法。

由于场景是时间 t 的纯函数，任意一帧都可以冻结、截图并比对。templates/ 提供调色板、后处理、相机、灯光、几何体、骨骼绑定、载具运动、路径、战斗、水体和特效等模块，并附有设计表以及素材来源和授权登记模板。

verify/ 目录包含完整示例，templates/qa/ 中的八个基于 Playwright 的脚本可检查冻结帧、动作序列和逐实体帧数据。质量检查脚本需要 Node 环境，并依赖 three、esbuild 和 playwright-core。

核心功能

  • 01锁定的四分之三视角相机，按场景包围盒自动适配，不支持轨道控制。
  • 02在固定后处理流程中完成 64 色调色板量化、有序抖动和墨线轮廓。
  • 03场景由时间函数确定，任意一帧都能冻结并用于比对。
  • 04提供相机、灯光、骨骼、载具、水体、战斗和特效等可复制模块。
  • 05基于 Playwright 的质量检查脚本，可输出冻结帧、动作条带和逐实体判定结果。

适用场景

  • 在 Three.js 中制作小型动态像素风微缩场景或游戏美术场景。
  • 生成可逐帧对比的确定性渲染结果，用于回归检查。
  • 让 AI 编码代理按照结构化的调研到构建流程制作 3D 场景。

快速上手

  1. 1

    克隆仓库

    git clone https://github.com/sloemo01/diorama.git "<target>"
  2. 2

    在开始构建前阅读完整的 SKILL.md 手册

  3. 3

    将所需模块从 templates/ 复制到你的项目中

使用前须知

  • QA 脚本需要安装 Node，并配有 three、esbuild 和 playwright-core。
  • 安装流程是为能运行 shell 命令的 AI 代理编写的。

标签

#threejs#pixel-art#webgl#creative-coding#game-art#procedural-generation#3d-animation#diorama#pixelation#skill

常见问题

diorama 是什么？
用于构建像素风微缩场景的 Three.js 工作流与代码模板，包含固定镜头、调色板量化和逐帧质量检查。 Diorama 是一套用于在 Three.js 中制作像素风微缩场景的工作流说明与可复制代码模板。场景固定在一块底座上，从锁定的四分之三视角拍摄，使用 64 色调色板、有序抖动、墨线轮廓和玩具比例的动画人物。仓库的核心是 SKILL.md，它单文件涵盖调研优先的制作流程、画面与动画标准、渲染管线和质量检查方法。
diorama 可以免费使用吗？用的什么许可证？
diorama 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
diorama 还在维护吗？
活跃维护中。diorama 最近一次提交是在 2026年11月7日。
diorama 适合用来做什么？
在 Three.js 中制作小型动态像素风微缩场景或游戏美术场景。 生成可逐帧对比的确定性渲染结果，用于回归检查。 让 AI 编码代理按照结构化的调研到构建流程制作 3D 场景。
diorama 怎么安装和运行？
克隆仓库: git clone https://github.com/sloemo01/diorama.git "<target>" 在开始构建前阅读完整的 SKILL.md 手册 将所需模块从 templates/ 复制到你的项目中
在哪里获取 diorama？
源代码和安装说明在 GitHub 上：https://github.com/sloemo01/diorama

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目