CubeCity 方块城市

CubeCity 方块城市是什么

CubeCity 是一款基于 Three.js 与 Vue 3 的 2.5D 卡通风格城市建造模拟游戏。你可以在网格地图上自由放置、搬迁和拆除建筑与道路，平衡住宅（R）、商业（C）、工业（I）的发展，同时兼顾环境（E）、社会（S）、治理（G）指标，让城市持续成长。

项目采用 MIT 协议开源，提供在线试玩地址，适合作为 Web 3D 游戏开发的学习与二次开发基础。

核心玩法

游戏围绕四种操作模式展开：

• 选择模式（SELECT）：点击建筑查看居民数量、状态与产出，满足条件时可升级建筑。
• 建造模式（BUILD）：从左侧面板选择建筑，在可用地皮上点击放置，实时预览模型与高亮提示。
• 搬迁模式（RELOCATE）：选中已建建筑后点击空地即可搬迁，放置前可旋转建筑调整朝向。
• 拆除模式（DEMOLISH）：点击不再需要的建筑将其拆除，并返还部分建造成本。

建筑会自动产出金币，金币用于建造新建筑、升级或扩展领地，城市进度会自动保存在本地。

建筑状态轮循显示

项目内置了一套建筑状态提示系统，用于直观展示建筑当前的问题与增益：

• Debuff 优先：建筑存在问题时，优先轮循显示所有负面状态。
• Buff 候补：没有问题时，轮循显示所有增益状态。
• 平滑切换：状态之间使用淡入淡出动画，每 2.5 秒自动切换一次。

状态类型大致分为：

DEBUFF: ['MISSING_ROAD', 'MISSING_POWER', 'MISSING_POPULATION', 'OVER_POPULATION', 'MISSING_POLLUTION']
BUFF: ['POWER_BOOST', 'ECONOMY_BOOST', 'POPULATION_BOOST', 'COIN_BUFF', 'HUMAN_BUFF', 'UPGRADE']

开发者可以在建筑类中通过 statusConfig 配置状态条件与显示效果，参考实现位于 src/js/components/tiles/buildings/park.js。

技术栈

• 核心渲染：Three.js
• 前端框架：Vue 3
• 构建工具：Vite
• UI 与样式：Tailwind CSS & SCSS
• 状态管理：Pinia
• 事件总线：mitt

文档与资源

项目提供了较完整的中文文档：

• 新手指南：详细的玩法说明与技巧
• 新手开发指南：开发环境搭建与开发规范
• PRD 文档：产品需求说明
• TD 文档：技术设计说明

未来规划

作者计划加入动态经济系统、挑战与失败机制、策略性建筑互相影响、动态事件系统以及科技树与政策系统，进一步提升城市管理的策略深度。

适合谁

如果你正在学习 Three.js、想了解 Vue 3 如何组织 3D 游戏状态，或者想找一个可玩、可改的模拟经营项目作为练手，CubeCity 是一个不错的起点。