企业官网建设流程全解析

Git City完全指南：把你的GitHub变成一座3D像素城市，让开源贡献被全世界看见

【免费下载链接】git-cityYour GitHub profile as a 3D pixel art building in an interactive city项目地址: https://gitcode.com/gh_mirrors/gi/git-city

Git City 是一个开源项目，它把每一个 GitHub 个人主页变成一座 3D 像素艺术建筑，并组成一座可以飞行、探索和社交的互动 3D 像素城市。你的贡献越多，建筑越高；你的仓库越多，楼体越宽；你获得的 Star 越多，窗户越明亮。本指南将帮你快速了解 Git City 3D 像素城市的玩法、原理与本地部署方法。

Git City 是什么？

简单来说，Git City 是一款「GitHub 可视化」作品：整个城市由真实的 GitHub 数据生成。每个开发者都对应楼群中的一栋建筑，城市会随着社区的数据实时成长。

• 🏙️3D 像素艺术建筑— 每栋楼对应一个 GitHub 用户，高度由贡献数决定，宽度由公开仓库数决定，亮起的窗户代表近期活跃度
• ✈️自由飞行模式— 平滑的相机操控，在楼群之间穿梭、俯瞰天际线
• 📊个人主页— 每位开发者都有专属页面，展示数据统计、成就和最热门仓库
• 🏆成就系统— 按贡献、Star、仓库数、邀请好友等条件解锁成就
• 🎨建筑自定义— 认领你的楼后，用商店道具装饰它（皇冠、光环、屋顶特效、立脸装饰）
• 🤝社交功能— 给其他开发者点赞、赠送道具、推荐好友，并查看实时动态流
• ⚖️对比模式— 两位开发者并排对比建筑与数据
• 🖼️分享卡片— 下载横版或故事版式的人物分享图卡

建筑数据是如何计算的？

Git City 把枯燥的数字翻译成了直观的建筑语言，规则非常易懂：

渲染层面，建筑使用实例化网格（instanced meshes）和 LOD 细节层次系统来保证性能：近处的楼显示完整细节和动态窗户，远处的楼使用简化几何体。核心渲染逻辑位于 CityCanvas.tsx 与 CityScene.tsx，城市昼夜主题由 sky.ts 控制。

值得体验的 6 个核心玩法

1. 认领你的建筑：登录 GitHub 后找到自己那栋楼，点击认领（ClaimButton.tsx 就是那个"CLAIMED"徽章背后的组件），它就正式属于你的了。
2. 飞越城市：进入飞行模式，以第一视角掠过天际线，还能看到其他玩家的远程飞行员。
3. 冲刺成就：成就系统覆盖贡献、Star、仓库、邀请等多个维度，奖励逻辑定义在 achievements.ts。
4. 升级与经验值：打卡、参与活动都可以获得 XP 和称号，等级体系在 xp.ts 中实现。
5. 像素商店：用赚取的像素币兑换装饰道具，装扮你的建筑。
6. 对比挑战：邀请另一位开发者进行 Compare 对决，并排展示两人建筑与数据。

一键本地部署：最快配置方法

如果想在自己电脑上跑起这座 3D 像素城市，只需要三步。项目提供了完整的本地后端方案——无需 Supabase 账号，也无需配置 GitHub OAuth 应用。

第一步：克隆仓库

git clone https://gitcode.com/gh_mirrors/gi/git-city cd git-city

第二步：安装依赖并配置环境变量

npm install cp .env.example .env.local

第三步：启动开发服务器

npm run dev

打开http://localhost:3001即可看到这座 3D 像素城市。

本地登录采用零配置方式：点击"Sign in with GitHub"会进入内置的开发登录页，输入任意 GitHub 用户名即可体验，系统会用该账号创建一栋楼。

💡 提示：如果需要完整后端，可安装 Supabase CLI 执行supabase start启动本地数据库，所有数据库迁移会自动应用。数据库结构可按顺序查看 supabase/migrations/ 目录下的 100 多个迁移文件。

技术栈一览

完整说明可阅读项目根目录的 README.md，贡献规范见 CONTRIBUTING.md。

常见问题 FAQ

Q：新手可以直接玩吗？可以。Git City 主要面向浏览和探索，无需编程基础，注册 GitHub 账号后就能认领自己的建筑。

Q：为什么我的楼比别人矮？楼高来自你的 GitHub 贡献总数。持续提交代码、开源你的仓库，楼就会越来越高——这正是 Git City 想传达的理念：让每一份开源贡献都被看见。

Q：本地运行需要付费服务吗？不需要。Supabase CLI 支持完全本地化的数据库栈，开发登录也是零配置的。

总结

Git City 用"3D 像素城市"这个最直观的方式，把 GitHub 数据变成了可以触摸的城市景观。无论你是想展示开源履历的开发者，还是好奇前端 3D 玩法的技术爱好者，都值得一逛——毕竟，在 Git City 里，代码真的能盖起一座城市。🚀

【免费下载链接】git-cityYour GitHub profile as a 3D pixel art building in an interactive city项目地址: https://gitcode.com/gh_mirrors/gi/git-city