emollick/monument-brutalist-city-builder

# MONUMENT [](https://github.com/emollick/monument-brutalist-city-builder/actions/workflows/ci.yml) [](LICENSE) **一款关于体量、光线、公共生活和引导式生长的、可玩的粗野主义玩具城市。** [在 Netlify 上玩 Monument](https://monument-brutalist-city-builder.netlify.app/) · [阅读控制说明](docs/CONTROLS.md) · [了解架构](docs/ARCHITECTURE.md)  Monument 将直接的建筑体量推敲与充满生机、富有氛围的城市结合在一起。拖动彩色控制柄以重塑单个建筑结构，改变其建造方式与用途，引导街区的特征，并在分析视图、街道视角、航拍视角和电影级视图之间切换。这里没有经济系统或胜利状态的限制：它是一个关于创造、居住和重访城市的设计玩具。 ## 亮点 - 九种生成式构图——条形、分裂式、群聚式、堆叠式、庭院式、桥接式、环形、胶囊式和巨型框架——与六种生长曲线相组合。 - 用于位置、旋转、高度、跨度、深度、悬挑、镂空、锥形、重复、节点衔接、分支和顶冠的直接 3D 控制系统。 - 六种建筑语言、六种混凝土色调、多种结构和立面系统，以及五种可占用空间的功能程序。 - 材质、功能、结构、日照、活动和隐含碳排放视角。 - 默认、Cyberpunk、绿色、极权和大学氛围，可改变光照、街道、天际线细节、标识和后期处理效果。 - 环绕、街道、航拍和电影级视角相机，配以可控的昼夜循环、交通、人群、公共空间以及建筑内有人居住的灯光。 - 三座预设城市、一块空白场地、命名的本地存档、撤销/重做、生长选择以及极简的专注模式。 - 兼容桌面端、平板电脑、横屏手机和竖屏手机的响应式界面。移动端建筑选择会先在以控制柄优先的直接编辑视图中打开，随后再展开完整的设计面板。 ## 快速开始 前置要求：Node.js 20 或更高版本以及 npm。 ``` git clone https://github.com/emollick/monument-brutalist-city-builder.git cd monument-brutalist-city-builder npm ci npm run dev ``` 打开 Vite 打印出的本地 URL。 ## 游戏玩法 1. 打开一座预设城市，或从“空旷场地”开始。 2. 选择一栋建筑并拖动其彩色控制柄来重塑它。在移动设备上，当你需要详细的检查面板时，请点击 **Design**。 3. 在检查面板中更改构图、生长曲线、建筑语言、结构、立面、用途和材质。 4. 从构建栏中添加建筑和公共空间。 5. 切换视角、氛围、相机和一天中的时间，以不同的方式检查或体验这座城市。 6. 在本地保存命名的版本，并从“城市图书馆”中重新打开它们。 键盘快捷键：`1–6` 构建，`V` 选择，`X` 拆除，`Space` 暂停，`F` 专注模式，`?` 字段手册，以及 `Ctrl/Cmd+Z` 撤销。直接形状控制柄支持方向键微调。有关完整的桌面和触摸指南，请参阅[控制说明](docs/CONTROLS.md)。 ## 项目结构 | 路径 | 职责 | | --- | --- | | `src/App.tsx` | 应用状态、界面面板、分析、生长选择、撤销/重做、保存以及响应式编辑流程 | | `src/CityScene.tsx` | React Three Fiber 场景、程序化建筑几何体、街道、氛围、相机、光照、控制柄和自适应渲染 | | `src/data.ts` | 功能、材质、类型学、设计语言、构图、曲线、轨迹、地块网格和初始建筑 | | `src/cityLibrary.ts` | 预设城市模板、存档记录、本地存储持久化以及历史数据迁移 | | `src/controlApplicability.ts` | 用于解释每种建筑语法下哪些控件具有可见效果的共享规则 | | `src/types.ts` | 核心 city、building、graphics、charter 和 snapshot 类型 | | `src/styles.css` | 桌面端及响应式界面系统、氛围叠加层、面板、控制柄以及欢迎界面展示 | | `src/__tests__/` | 针对 data 不变性、模板、持久化和架构控制规则的快速测试 | | `docs/` | 架构、控制说明、开发和测试指南 | | `.github/workflows/ci.yml` | GitHub 在 push 和 pull request 时执行的验证 | 有关完整的数据和渲染流程，请阅读[架构](docs/ARCHITECTURE.md)。 ## 脚本 | 命令 | 用途 | | --- | --- | | `npm run dev` | 在本地网络启动 Vite | | `npm run typecheck` | 运行 TypeScript 项目检查 | | `npm test` | 运行一次 Vitest 测试套件 | | `npm run test:watch` | 在开发时以交互方式运行测试 | | `npm run build` | 进行类型检查并在 `dist/` 中创建生产环境打包 | | `npm run preview` | 在本地托管生产环境打包 | | `npm run check` | 运行类型检查、测试和生产构建——与 CI 使用的验证相同 | ## 持久化与隐私 Monument 没有后端，也不需要环境变量。城市存档和显示偏好设置会保存在浏览器的 local storage 中： - `monument-city-library-v1` 最多可存储 30 个命名的城市快照。 - `monument-graphics-v2` 存储显示偏好设置。 - 旧版 `monument-city-v2` 存档会在可能的情况下自动迁移。 存档不会在浏览器或设备之间同步。清除站点数据将删除它们。请勿将浏览器存储作为永久归档存储。 ## 测试与质量 GitHub Actions 会在每次 pull request 和每次推送到 `main` 分支时运行 `npm run check`。当前的自动化测试套件会检查应用程序中确定性的、非 WebGL 部分；视觉渲染、触摸行为、氛围变化和性能仍然需要按照文档说明的手动矩阵进行测试。 在发布视觉或架构更改之前，请阅读[测试](docs/TESTING.md)。 ## 部署 包含的 `netlify.toml` 会运行 `npm run build` 并通过单页应用重定向发布 `dist/`。将存储库连接到 Netlify；不需要环境变量。 要进行本地生产检查： ``` npm run check npm run preview ``` `dist/`、`node_modules/` 和 `.netlify/` 目录已被刻意忽略。它们是生成的产物，而不是缺失的源代码。 ## 文档 - [架构](docs/ARCHITECTURE.md)——状态所有权、生成式几何体、渲染、持久化和性能。 - [控制说明](docs/CONTROLS.md)——桌面端、触摸、相机、视角、氛围和直接操作行为。 - [开发](docs/DEVELOPMENT.md)——新表单、氛围、控件和模板的设置、约定以及安全的扩展路径。 - [测试](docs/TESTING.md)——自动化范围、手动 QA 矩阵和性能检查。 - [贡献](CONTRIBUTING.md)——分支、pull request、无障碍访问和视觉审查的期望。 ## 贡献 欢迎贡献。请运行 `npm run check`，描述更改的架构意图，并为视觉作品附上更改前后的截图。请从 [CONTRIBUTING.md](CONTRIBUTING.md) 开始。 ## 许可 Monument 采用 [MIT License](LICENSE) 发布。版权所有 © 2026 Ethan Mollick。

标签：3D图形, WebGL, 城市建造, 建筑, 游戏, 生成艺术, 自动化攻击