把你的 GitHub 变成一座 3D 城市，这个开源项目太有意思了

你有没有想过，你在 GitHub 上提交的每一行代码、每一个仓库、每一颗 Star，最终会长成什么样子？

Git City 给了一个答案：你的 GitHub，是一栋楼。

贡献越多，楼越高；仓库越多，楼越宽；Stars 越多，窗户越亮。所有开发者的数据汇聚在一起，组成一座像素风的 3D 城市，你可以驾驶飞机穿越其中，发现身边的开发者。

你的 GitHub 数据，变成了这栋楼

打开 thegitcity.com，输入任意 GitHub 用户名，系统会把这个账号的数据映射成一栋 3D 像素建筑：

GitHub 数据对应建筑效果
贡献数（Contributions）楼的高度
公开仓库数（Repos）楼的宽度
获得的 Stars窗户亮度
近期活跃度发光特效和动态效果

贡献稳定的开发者，楼高而亮；仓库多的开发者，楼宽气派；长期不提交的账号，可能就是一栋暗窗矮楼。

整个城市里，每一栋楼都是一个真实的开发者。你可以驾驶飞机低飞穿越，点击任意建筑查看这个开发者的详细信息——贡献记录、仓库列表、成就勋章，一目了然。

技术实现：Three.js + React Three Fiber

作为前端开发者，看到这个项目的第一反应是：这个 3D 渲染怎么做的？

技术栈：

  • Three.js（React Three Fiber）：整个 3D 城市渲染引擎
  • Instanced Mesh：用实例化渲染批量绘制大量建筑，性能不崩
  • LOD（Level of Detail）：距离远的建筑降低细节，保证帧率
  • Next.js 16 + Supabase：前后端架构
  • Tailwind CSS v4：样式

城市里可能同时存在几千栋建筑，全靠 Instanced Mesh 技术才能流畅运行。如果你在做 Three.js 场景里有大量重复物体的需求（粒子、树木、建筑群），这个项目是很好的参考案例。

怎么使用？

在线体验（推荐）：直接访问 thegitcity.com，搜索自己的 GitHub 用户名，看看你的楼长什么样。

本地部署（想研究 Three.js 实现的）：

# 克隆项目
git clone https://github.com/srizzon/git-city.git
 
# 安装依赖
npm install
 
# 配置环境变量（需要 Supabase + GitHub OAuth）
cp .env.example .env.local
 
# 启动
npm run dev

本地跑起来需要配 Supabase 和 GitHub OAuth，主要用于用户登录和数据持久化。如果只是研究 Three.js 渲染部分，可以直接看 src 下的场景代码。

说在最后

Git City 本身是一个有趣的 side project——它把枯燥的 GitHub 数据变成了一个可以"逛"的空间，让代码贡献有了另一种具象化的呈现方式。

对前端开发者来说，这个项目还有额外的参考价值：Three.js 大规模场景管理、Instanced Mesh 性能优化、React Three Fiber 实践，代码全部开源可以直接翻。

在线体验：thegitcity.com

开源地址：github.com/srizzon/git-city