基于 Three.js 的交互式 3D 拆解教学工具 — 支持 AI 生成模型、爆炸视图动画、WebXR AR 预览
| 功能 | 说明 |
|---|---|
| 🧨 3D 爆炸视图 | 滑块控制拆解程度,鼠标拖拽旋转/缩放,点击查看部件信息 |
| 🤖 AI 生成模型 | 文字提示词生成 3D 模型(乐高人仔、汽车、房子、超级英雄等) |
| 🖼️ 图片转 3D | 上传图片自动重建为 3D 模型,支持纹理烘焙 |
| 📱 WebXR AR 预览 | 在支持 AR 的设备上将模型投射到现实空间 |
| 🧱 乐高砖块拼接 | 2x4, 2x2, 1x2 等标准砖块,真实积木拼接效果 |
| 🎨 自定义模型上传 | 上传 GLB 模型直接预览拆解效果 |
| 🔌 多 AI 提供商 | OpenAI / Anthropic / StepFun / Kimi / NVIDIA / Ollama / LM Studio |
| 🌐 3D 生成 MCP 联动 | Meshy / Tripo(Triple 3D) / Hyper3D(Rodin) 经 MCP 工具调用,生成模型直接导入 Blender 场景 |
- Node.js 18+
- Blender 3.6+(可选,AI 绘画功能需要)
双击 启动服务.command
双击 start.bat
npm install
node server.js
# 浏览器打开 http://localhost:3001- 拖动滑块控制拆解程度
- 鼠标拖拽旋转视角,滚轮缩放
- 点击部件高亮并显示信息
- 访问
http://localhost:3001/ai-config.html配置 AI 提供商 - 在主页输入提示词(如"乐高跑车"、"蝙蝠侠")
- 系统自动调用 Blender 生成 3D 模型并加载
上传图片 → 自动去背景 → 3D 重建 → 纹理烘焙 → 交互预览
├── index.html # 主页面(3D 拆解预览)
├── ai-config.html # AI 模型配置页
├── main.js # Three.js 场景 & 拆解逻辑
├── server.js # Node.js 后端服务
├── scripts/ # 图片转3D / 纹理烘焙 / 工具脚本
├── src/ # 前端模块
├── tests/ # 单元 & E2E 测试
├── docs/ # 详细文档
└── blender_scripts/ # Blender Python 脚本
npm run dev # 启动开发服务器
npm run server # 启动 Blender 集成服务器
npm run format:all # 代码格式化
npm run test # 运行测试
npm run build # 生产构建| 提供商 | 用途 | 配置方式 |
|---|---|---|
| OpenAI | 文本生成模型 | API Key |
| Anthropic | 文本生成模型 | API Key |
| StepFun (阶跃星辰) | 文本生成模型 | API Key |
| Kimi (月之暗面 Moonshot) | 文本生成模型 | API Key |
| NVIDIA | GLM-5.2 模型 | API Key |
| Ollama | 本地模型 | 本地地址 |
| LM Studio | 本地模型 | 本地地址 |
图片转 3D 的云端提供商(Replicate / Meshy / Tripo / Hyper3D)在下方「图片转 3D」部署方式中单独配置,不在此文本生成提供商之列。
复制 ai-config.example.json 为 ai-config.json 并填入密钥即可。
项目内置 MCP 服务器(scripts/mcp_server.py),可被 Claude / CodeBuddy 等支持 MCP 的 CUI 直接调用,将云端 3D 生成服务与本地 Blender 场景联动。
在 MCP 客户端(如 .mcp.json)中指向本服务器:
{ "mcpServers": { "blender": { "command": "python3", "args": ["scripts/mcp_server.py"] } } }| 工具 | 服务 | 流程 |
|---|---|---|
create_meshy_job / poll_meshy_job / import_meshy_asset |
Meshy AI | 文生/图生 3D → 轮询 → 导入场景 |
create_tripo_job / poll_tripo_job / import_tripo_asset |
Tripo (Triple 3D) | 文生/图生 3D → 轮询 → 导入场景 |
create_hyper3d_job / poll_hyper3d_job / import_hyper3d_asset |
Hyper3D (Rodin) | 复用已有 Rodin 命令 |
- 密钥通过参数
api_key传入,或设置环境变量MESHY_API_KEY/TRIPO_API_KEY create/poll无需 Blender 运行;import_*会把生成的 GLB 下载到本地并导入当前 Blender 场景(联动)
除了 MCP CUI 联动外,本项目 Web 界面(首页「🧊 图片转3D」下拉框)也内置了这些云端提供商。在 ai-config.html 的「图片转3D」中填入对应 API Key 后,即可在下拉框选择:
部署方式(deploy) |
说明 |
|---|---|
local |
本地 TripoSR 真重建(离线,无需 API) |
replicate |
Replicate 云端(Hunyuan3D-2) |
meshy |
Meshy AI 图生 3D(api.meshy.ai,支持 base64 直传) |
tripo |
Tripo (Triple 3D) 图生模型(先上传换 file_token 再生成) |
hyper3d |
Hyper3D (Rodin) 图生 3D(hyperhuman.deemos.com,multipart 直传) |
三种云端方式的服务端实现见 server.js 的 runMeshyImageTo3D / runTripoImageTo3D / runHyper3DImageTo3D,与 MCP 工具逻辑一致。
ISC