### [把代码写成一座城！Git-City 深度解析：将 Git 提交历史 3D 视觉化](https://www.qiqiwa.com/article/389)

**Published:** 2026-03-02T15:08:51

**Author:** Hello

**Excerpt:** 你是否想过，如果你参与的项目是一座城市，它会是什么样？是高楼林立的繁华大都市，还是错落有致的小镇？ Git-City 是一款神奇的开源工具，它能将你的 Git 仓库（Repository）通过 Three.js 渲染成一座精美的 3D 城市

你是否想过，如果你参与的项目是一座城市，它会是什么样？是高楼林立的繁华大都市，还是错落有致的小镇？

**Git-City** 是一款神奇的开源工具，它能将你的 Git 仓库（Repository）通过 **Three.js** 渲染成一座精美的 3D 城市。每一个建筑、每一条街道，都代表着代码的演进与贡献。

![](https://www.qiqiwa.com/wp-content/uploads/2026/03/dd74e6cb7f20260302230730.png)

* * *

## 🌟 Git-City：代码森林的 3D 建模师

Git-City 不仅仅是一个视觉玩具，它通过一套逻辑严密的算法，将抽象的代码指标具象化：

-   **🏗️ 建筑高度**：通常对应文件的**行数（Lines of Code）**，代码越多，楼层越高。
-   **📐 建筑密度**：反映了代码模块的**复杂程度**。
-   **📅 演进动画**：你可以看到城市随着 Commit 的增加，从小村庄一步步扩张成超级都市的过程。
-   **🎨 实时渲染**：基于 WebGL，支持在浏览器中自由旋转、缩放，沉浸式观察你的代码架构。

* * *

## 📊 视觉映射逻辑：如何读懂你的城市？

| **城市元素** | **对应的 Git/代码属性** | **视觉表现** |
| --- | --- | --- |
| **摩天大楼** | 核心逻辑文件 / 大规模类库 | 高耸入云，位于中心地带 |
| **矮建筑** | 配置文件 / 辅助工具类 | 散落在边缘或集群中 |
| **地块划分** | 项目文件夹结构（Package/Folder） | 形成不同的街区（Neighborhoods） |
| **时间轴** | 提交历史 (Commit History) | 建筑的“生长”动画 |

* * *

## 🛠️ 准备工作：前置环境需求

为了能流畅运行 Git-City，你需要确保本地环境具备以下条件：

-   **Node.js**: v16.0 及以上版本（建议使用最新的 LTS 版本）。
-   **Git**: 系统已安装 Git 命令行工具。
-   **现代浏览器**: 支持 WebGL 的浏览器（Chrome, Edge, Firefox 等）。
-   **网络环境**: 部分依赖项可能需要从 GitHub 或 NPM 下载。

* * *

## 🚀 部署步骤：三步构建你的代码之城

Git-City 的部署非常符合现代前端的直觉，简单三步即可完成。

### 1\. 获取源代码

```
git clone https://github.com/srizzon/git-city.git
cd git-city
```

### 2\. 安装依赖包

使用 `npm` 或 `yarn` 进行安装：

```
npm install
# 或者使用 yarn
yarn install
```

### 3\. 启动并可视化本地项目

你可以直接启动本地开发服务器，并指定你想要可视化的仓库路径：

```
# 启动项目
npm start
```

> **💡 贴士**：启动后，在 Web 界面中你可以输入本地 Git 仓库的**绝对路径**，或者直接上传仓库文件夹。程序会自动解析 `.git` 文件夹并生成 3D 模型。

* * *

## 🐳 进阶：使用 Docker 部署（如果你想搭建在线服务）

如果你希望将 Git-City 作为一个公共服务运行在你的服务器上，可以使用 Docker：

```
# 构建镜像
docker build -t git-city .

# 运行容器
docker run -d -p 3000:3000 --name my-git-city git-city
```

访问 `http://your-server-ip:3000` 即可远程访问。

* * *

## 📝 总结与评价

### ✅ 优点：

-   **视觉冲击力极强**：非常适合在技术分享、项目复盘或开源周报中展示。
-   **直观感受代码腐烂**：如果某个街区全是密密麻麻的高楼，可能意味着该模块过于臃肿，需要重构。
-   **交互性好**：支持 360 度无死角观察，甚至可以点击建筑查看具体文件名。

### ❌ 缺点：

-   **性能开销**：对于拥有数万个文件的超大型仓库（如 Linux Kernel），浏览器渲染可能会有压力。
-   **局限性**：目前更多是视觉展示，深度的代码质量分析功能尚在完善中。

* * *

## 🔗 项目官方资源

| **资源类别** | **链接地址** |
| --- | --- |
| **GitHub 仓库** | [srizzon/git-city](https://github.com/srizzon/git-city) |
| **在线 Demo** | [点击体验](https://www.thegitcity.com/) |
| **技术栈** | React + Three.js + D3.js |

* * *

**小编点评**：Git-City 证明了技术也可以很有趣。它不仅是代码的可视化，更是开发者汗水的纪念碑。下次老板问你最近在忙什么，直接把这座“城市”甩给他看！🏙️

**Tags:** 开源项目

**Categories:** 项目笔记

---