输入一段文字，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 对象层，需要在坐标系和渲染时序上进行同步处理。

后端

技术用途
FastAPIPython 后端 API 服务
OpenAI API理解文字描述，生成模型参数
FALAI 模型推理，执行 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 Arcki

2. 启动前端

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 dev

3. 启动后端

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)

搭建 threejs 的环境