git-city-3d-github-visualization 是做什么的？
使用 Next.js、Three.js 和 Supabase 构建与扩展 Git City —— 一个3D像素艺术城市，将 GitHub 个人资料变为可交互的建筑。
概述
本技能旨在帮助您创建和扩展 Git City，这是一个将 GitHub 个人资料转换为 3D 像素艺术城市的 Web 应用。通过本技能，您可以快速搭建基于 Next.js 的全栈项目，利用 Three.js 渲染 3D 场景，并通过 Supabase 进行数据存储和实时更新。
功能特点
- 3D 像素艺术渲染：使用 Three.js 创建低多边形、像素风格的建筑和城市景观。
- GitHub 集成：自动获取 GitHub 用户和仓库数据，将仓库贡献度、星标数等指标映射为建筑高度和颜色。
- 交互式探索：用户可旋转、缩放场景，点击建筑查看详细信息（如仓库名称、语言、星标数等）。
- 实时更新：通过 Supabase 数据库存储用户配置和缓存数据，支持多人协作和动态更新。
- 响应式设计：适配多种屏幕尺寸，提供良好的移动端体验。
环境要求
- Node.js >= 18
- npm 或 yarn
- Git
- Supabase 账户（用于数据库）
- GitHub 个人访问令牌（用于 API 调用）
安装与配置
- 克隆项目仓库：
git clone https://github.com/aradotso/git-city-3d-github-visualization.git
cd git-city-3d-github-visualization
- 安装依赖：
npm install
- 创建
.env.local文件并配置环境变量：
NEXT_PUBLIC_SUPABASE_URL=your-supabase-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-supabase-anon-key
GITHUB_TOKEN=your-github-personal-access-token
- 启动开发服务器：
npm run dev
使用方法
- 打开浏览器访问
http://localhost:3000。 - 输入 GitHub 用户名，系统将自动生成对应的 3D 城市。
- 拖拽或旋转视角浏览城市，点击建筑查看详细信息。
- 您可以通过修改
src/app/page.tsx中的配置调整城市布局和建筑样式。
项目结构
src/app/— Next.js 应用程序路由和页面src/components/— React 组件（包括 Three.js 场景、建筑生成器、UI 元素等）src/lib/— 工具函数和 API 客户端src/types/— TypeScript 类型定义public/— 静态资源supabase/— Supabase 数据库迁移和配置文件
扩展指南
- 添加新建筑类型：在
src/components/Building.tsx中添加新的几何体组合。 - 自定义数据源：修改
src/lib/github.ts以支持其他 Git 平台（如 GitLab、Bitbucket）。 - 增强交互效果：在
src/components/CityScene.tsx中集成点击、悬停事件。 - 部署：推荐使用 Vercel 进行部署，并确保设置好环境变量。
技术栈
- Next.js — React 全栈框架
- Three.js — 3D 渲染引擎
- Supabase — 后端数据库和实时订阅
- TypeScript — 类型安全
- Tailwind CSS — 样式框架
贡献指南
欢迎提交 Pull Request 或 Issue。请确保代码遵循现有风格并通过 lint 检查。
许可证
MIT