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-cityGit City 是一个开源项目它把每一个 GitHub 个人主页变成一座 3D 像素艺术建筑并组成一座可以飞行、探索和社交的互动 3D 像素城市。你的贡献越多建筑越高你的仓库越多楼体越宽你获得的 Star 越多窗户越明亮。本指南将帮你快速了解 Git City 3D 像素城市的玩法、原理与本地部署方法。Git City 是什么简单来说Git City 是一款「GitHub 可视化」作品整个城市由真实的 GitHub 数据生成。每个开发者都对应楼群中的一栋建筑城市会随着社区的数据实时成长。️3D 像素艺术建筑— 每栋楼对应一个 GitHub 用户高度由贡献数决定宽度由公开仓库数决定亮起的窗户代表近期活跃度✈️自由飞行模式— 平滑的相机操控在楼群之间穿梭、俯瞰天际线个人主页— 每位开发者都有专属页面展示数据统计、成就和最热门仓库成就系统— 按贡献、Star、仓库数、邀请好友等条件解锁成就建筑自定义— 认领你的楼后用商店道具装饰它皇冠、光环、屋顶特效、立脸装饰社交功能— 给其他开发者点赞、赠送道具、推荐好友并查看实时动态流⚖️对比模式— 两位开发者并排对比建筑与数据️分享卡片— 下载横版或故事版式的人物分享图卡建筑数据是如何计算的Git City 把枯燥的数字翻译成了直观的建筑语言规则非常易懂指标影响效果示例贡献数Commits建筑高度1,000 次提交 → 楼更高公开仓库数建筑宽度仓库越多 → 底座越宽Star 数窗户亮度Star 越多 → 亮窗越多近期活跃度窗户图案最近活跃 → 独特的灯光图案渲染层面建筑使用实例化网格instanced meshes和 LOD 细节层次系统来保证性能近处的楼显示完整细节和动态窗户远处的楼使用简化几何体。核心渲染逻辑位于 CityCanvas.tsx 与 CityScene.tsx城市昼夜主题由 sky.ts 控制。值得体验的 6 个核心玩法认领你的建筑登录 GitHub 后找到自己那栋楼点击认领ClaimButton.tsx 就是那个CLAIMED徽章背后的组件它就正式属于你的了。飞越城市进入飞行模式以第一视角掠过天际线还能看到其他玩家的远程飞行员。冲刺成就成就系统覆盖贡献、Star、仓库、邀请等多个维度奖励逻辑定义在 achievements.ts。升级与经验值打卡、参与活动都可以获得 XP 和称号等级体系在 xp.ts 中实现。像素商店用赚取的像素币兑换装饰道具装扮你的建筑。对比挑战邀请另一位开发者进行 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 多个迁移文件。技术栈一览层面技术框架Next.js 16App Router、Turbopack3D 引擎Three.js react-three/fiber drei数据库与认证SupabasePostgreSQL、GitHub OAuth、行级安全实时通信PartyKit / PartySocket见 party/lobby.ts样式Tailwind CSS v4 Silkscreen 像素字体完整说明可阅读项目根目录的 README.md贡献规范见 CONTRIBUTING.md。常见问题 FAQQ新手可以直接玩吗可以。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Git City完全指南：把你的GitHub变成一座3D像素城市，让开源贡献被全世界看见
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-cityGit City 是一个开源项目它把每一个 GitHub 个人主页变成一座 3D 像素艺术建筑并组成一座可以飞行、探索和社交的互动 3D 像素城市。你的贡献越多建筑越高你的仓库越多楼体越宽你获得的 Star 越多窗户越明亮。本指南将帮你快速了解 Git City 3D 像素城市的玩法、原理与本地部署方法。Git City 是什么简单来说Git City 是一款「GitHub 可视化」作品整个城市由真实的 GitHub 数据生成。每个开发者都对应楼群中的一栋建筑城市会随着社区的数据实时成长。️3D 像素艺术建筑— 每栋楼对应一个 GitHub 用户高度由贡献数决定宽度由公开仓库数决定亮起的窗户代表近期活跃度✈️自由飞行模式— 平滑的相机操控在楼群之间穿梭、俯瞰天际线个人主页— 每位开发者都有专属页面展示数据统计、成就和最热门仓库成就系统— 按贡献、Star、仓库数、邀请好友等条件解锁成就建筑自定义— 认领你的楼后用商店道具装饰它皇冠、光环、屋顶特效、立脸装饰社交功能— 给其他开发者点赞、赠送道具、推荐好友并查看实时动态流⚖️对比模式— 两位开发者并排对比建筑与数据️分享卡片— 下载横版或故事版式的人物分享图卡建筑数据是如何计算的Git City 把枯燥的数字翻译成了直观的建筑语言规则非常易懂指标影响效果示例贡献数Commits建筑高度1,000 次提交 → 楼更高公开仓库数建筑宽度仓库越多 → 底座越宽Star 数窗户亮度Star 越多 → 亮窗越多近期活跃度窗户图案最近活跃 → 独特的灯光图案渲染层面建筑使用实例化网格instanced meshes和 LOD 细节层次系统来保证性能近处的楼显示完整细节和动态窗户远处的楼使用简化几何体。核心渲染逻辑位于 CityCanvas.tsx 与 CityScene.tsx城市昼夜主题由 sky.ts 控制。值得体验的 6 个核心玩法认领你的建筑登录 GitHub 后找到自己那栋楼点击认领ClaimButton.tsx 就是那个CLAIMED徽章背后的组件它就正式属于你的了。飞越城市进入飞行模式以第一视角掠过天际线还能看到其他玩家的远程飞行员。冲刺成就成就系统覆盖贡献、Star、仓库、邀请等多个维度奖励逻辑定义在 achievements.ts。升级与经验值打卡、参与活动都可以获得 XP 和称号等级体系在 xp.ts 中实现。像素商店用赚取的像素币兑换装饰道具装扮你的建筑。对比挑战邀请另一位开发者进行 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 多个迁移文件。技术栈一览层面技术框架Next.js 16App Router、Turbopack3D 引擎Three.js react-three/fiber drei数据库与认证SupabasePostgreSQL、GitHub OAuth、行级安全实时通信PartyKit / PartySocket见 party/lobby.ts样式Tailwind CSS v4 Silkscreen 像素字体完整说明可阅读项目根目录的 README.md贡献规范见 CONTRIBUTING.md。常见问题 FAQQ新手可以直接玩吗可以。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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考