输入一段文字,AI 就在真实地图上给你建了栋楼

Arcki 是一个把三件事拼在一起的开源项目:真实世界的 3D 地图、文字生成 3D 模型、以及可以拖放编辑的场景编辑器。简单说,你可以选一个真实的地理位置,用文字描述你想要的建筑,AI 生成对应的 3D 模型,然后把它放进那个真实的地图场景里。
项目官网的定位是"按你的想象重建世界",主要面向建筑师、城市规划师和对空间可视化感兴趣的设计师。从开发者角度看,它更值得关注的地方是技术选型——React Three Fiber、Mapbox GL、OpenAI、FAL 这几个工具的组合方式,提供了一个可以直接参考的全栈实现思路。
三个核心能力
1. 真实地图的 3D 渲染
Arcki 使用 Mapbox GL(一个支持矢量瓦片和 3D 地形渲染的地图库)加载任意位置的地图数据,并通过 React Three Fiber(Three.js 的 React 封装)在同一个场景中叠加自定义 3D 内容。这意味着你看到的地图本身就是立体的,有建筑轮廓、地形起伏,而不是一张平面图。
2. 文字生成 3D 模型
输入文字描述(例如"罗马风格柱廊"),后端调用 OpenAI 和 FAL(一个 AI 模型推理平台,支持图片和 3D 生成)生成对应的 3D 资产,返回可以直接在场景中使用的模型文件。生成的模型会自动保存到用户的素材库,下次可以直接复用。
3. 场景编辑
生成的模型支持拖拽放置、旋转和缩放。编辑界面的交互逻辑是"先选地点,自动加载地形和现有建筑,再生成或导入模型,最后替换或叠加到场景中"。
技术架构
前端
| 技术 | 用途 |
|---|---|
| Next.js 15 | 页面框架和路由 |
| React Three Fiber | 在 React 中管理 Three.js 3D 场景 |
| Mapbox GL | 加载真实地图和 3D 地形数据 |
| TypeScript | 类型安全 |
React Three Fiber 和 Mapbox GL 的结合是这个项目技术上比较有意思的地方:两者各自管理不同的渲染上下文,Mapbox 负责地图层,React Three Fiber 负责自定义 3D 对象层,需要在坐标系和渲染时序上进行同步处理。
后端
| 技术 | 用途 |
|---|---|
| FastAPI | Python 后端 API 服务 |
| OpenAI API | 理解文字描述,生成模型参数 |
| FAL | AI 模型推理,执行 3D 内容生成 |
| Supabase | 用户认证和素材库存储 |
本地运行
前提条件:需要 Node.js、Python 3.x 环境,以及以下几个外部服务的 API Key:
- Mapbox Token(免费注册可获取)
- Supabase 项目的 URL 和匿名 Key
- OpenAI API Key
- FAL API Key
1. 克隆仓库
git clone https://github.com/jli2007/Arcki.git
cd Arcki2. 启动前端
cd client
npm install在 client/ 目录下创建 .env.local:
NEXT_PUBLIC_MAPBOX_TOKEN=你的Mapbox Token
NEXT_PUBLIC_SUPABASE_URL=你的Supabase URL
NEXT_PUBLIC_SUPABASE_ANON_KEY=你的Supabase匿名Key
NEXT_PUBLIC_API_URL=http://localhost:8000然后启动:
npm run dev3. 启动后端
cd server
pip install -r requirements.txt在 server/ 目录下创建 .env:
OPENAI_API_KEY=你的OpenAI Key
FAL_KEY=你的FAL Key然后启动:
python server.py两个服务都启动后,打开 http://localhost:3000 即可使用。
写在最后
Arcki 目前仍是早期项目,功能还在迭代中,生产环境的稳定性需要自行评估。对于想研究 React Three Fiber 与地图库结合、或者探索 AI 生成 3D 内容这两个方向的开发者,它提供了一个完整的、可以直接跑起来参考的实现。
FAL 作为 AI 推理平台在国内知名度不高,但它支持的模型范围(包括 3D 生成、图片生成等)值得了解;React Three Fiber 与 Mapbox 的坐标系对齐问题也是做类似项目绕不开的技术点,可以直接从这个项目的源码里找到处理思路。
GitHub 项目地址:https://github.com/jli2007/Arcki (opens in a new tab)