本页目录

3d.city(浏览器 3D 城市建造游戏)

3d.city · lo-th/3d.city

3d.city 是一个开源的全 3D 城市建造游戏,直接在浏览器中运行,提供 WebGL2 与 WebGPU 两个版本入口。项目使用 Three.js 负责实时 3D 渲染,包含自制着色器、贴图与模型;城市模拟部分基于 micropolisJS(源自初代 SimCity 源码的模拟引...

策略 模拟经营 Three.js JavaScript 存档系统 游戏状态管理 UI 系统 渲染技术 中级
★ Stars 1,763 Forks 366 License 未明确 更新 2026-11-08

国内开发环境适配

Windows
官方声明支持
Linux
官方声明支持
macOS
官方声明支持
引擎 / 框架:Three.js 暂无中文教程标记 未标记站长实测
游戏为纯浏览器运行,无需本地编译;国内访问 GitHub Pages 主页可能较慢,可尝试镜像或本地克隆后自行托管。WebGPU 版本需要较新的浏览器与显卡驱动支持。

中文项目介绍

3d.city 是一个完全开源的 3D 城市建造游戏,它最大的特点是无需下载、无需安装,只要打开浏览器标签页就能直接开始建设你的城市。项目同时提供 WebGL2 与 WebGPU 两个版本入口,玩家可以根据自己浏览器的支持情况自由选择。

从定位上看,3d.city 并不是一个已经完成度极高的商业级作品,而是一个持续演进中的长期项目。作者在 README 中明确表示,长期愿景是把它发展成功能更丰富的城市建造游戏。当前版本号为 v1.0.0,已经具备可玩的核心循环,同时也在路线图中列出了后续要完善的方向。

项目采用 MIT 许可证,代码与美术资源(自制着色器、贴图、3D 模型)均开放,适合对浏览器 3D 游戏、城市模拟或 Three.js 实践感兴趣的开发者研究。

技术架构分析

技术架构

3d.city 的技术栈可以清晰地拆成「渲染」与「模拟」两条线:

  • 渲染层:Three.js。城市的所有实时 3D 画面由 Three.js 负责,包括作者自制的着色器、纹理和 3D 模型。Three.js 在浏览器 3D 领域生态成熟,能够较好地支撑城市级别的场景绘制。
  • 模拟层:micropolisJS。城市模拟逻辑并非从零编写,而是基于 micropolisJS 这一开源城市模拟引擎,而 micropolisJS 本身又源自初代 SimCity 的源码。这意味着游戏在 zoning、人口、财政等模拟规则上有经典城市建造游戏的基因。
  • Web Worker 隔离。模拟引擎运行在独立的 Web Worker 中,与主线程的 3D 渲染分离,从而避免模拟计算拖慢画面帧率,保证建造与浏览时的流畅体验。

这种「渲染与模拟分线程」的架构,是浏览器端模拟经营类游戏值得参考的设计思路。

补充说明

玩法与上手

游戏的目标是建造并经营一座 3D 城市。README 中提供了一张「Mini tutorial」示意图,帮助新玩家快速了解基本操作。虽然 README 没有逐条列出操作说明,但从项目性质可以推断,玩家需要在 3D 场景中进行地块规划、建筑放置等城市建造的常规操作。

由于模拟引擎继承自经典 SimCity 系,玩家可以期待相对完整的城市模拟反馈,而不是单纯的摆模型。具体操作细节建议直接进入游戏内体验,或参考项目主页的教程图片。

路线图

作者在 README 的 Roadmap 部分列出了后续计划,这些内容反映了项目当前仍在打磨的方向:

  • 修复存档与读档功能;
  • 增加不同的环境效果,例如雪天、夜晚等;
  • 补充更多音效;
  • 改进破坏效果,并修复灾害相关的问题;
  • 增加更多选项与建筑。

可以看出,项目在基础玩法之外,正朝着氛围表现与系统完善两个方向推进。

如何运行

3d.city 的游玩方式非常直接:访问项目主页提供的两个入口之一即可。

  • WebGL2 版本:适合大多数现代浏览器;
  • WebGPU 版本:面向支持 WebGPU 的较新浏览器。

README 没有提供本地构建步骤,项目以在线可玩为主要分发形式。如果希望研究源码,可以直接克隆仓库,但具体构建流程需以仓库内实际文件为准,README 未作说明。

学习建议

对于想从 3d.city 中学习的开发者,可以重点关注以下几个方向:

  • Three.js 实战:观察一个完整 3D 场景如何组织模型、贴图与自定义着色器;
  • Web Worker 分工:理解模拟逻辑与渲染循环如何解耦,以及消息传递的边界设计;
  • 经典模拟引擎的复用:micropolisJS 如何被嵌入到现代 3D 前端中,是「老代码新用」的案例;
  • 渐进式路线图管理:从 README 的 Roadmap 可以体会个人项目如何规划迭代。

由于项目仍在演进,阅读源码时建议结合当前版本状态,避免把路线图中的计划误认为已实现功能。

开源许可证与版权说明

许可证标识:未明确。源码、资源与依赖许可可能不同,请以官方仓库为准。本站仅做索引,不托管源码。

相似项目