Babylon.js MCP服务器
MCP（模型上下文协议）服务器，允许Claude等AI助手通过文本命令在Babylon.js场景中创建和操纵3D对象。
特性
- 创建具有可自定义属性的三维对象（长方体、球体、圆柱体、圆锥体、圆环体）
- 按名称删除对象
- 选择要突出显示的对象
- 列出场景中的所有对象
- MCP服务器与浏览器之间的实时WebSocket通信
- React和vanilla JavaScript实现
建筑
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Claude Desktop │────▶│ MCP Server │────▶│ Browser App │
│ │ │ (stdio + WS) │ │ (Babylon.js) │
└─────────────────┘ └──────────────────┘ └─────────────────┘安装
- 克隆存储库：
git clone
cd babylonjs-mcpV2- 安装依赖项：
npm install- 构建项目：
npm run build用法
1.启动MCP服务器
MCP服务器需要运行以桥接Claude和浏览器之间的通信：
node dist/mcp-stdio-server.js这将：
- 启动MCP服务器监听stdio
- 在端口8080上启动WebSocket服务器
2.启动浏览器应用程序
在新终端中，启动开发服务器：
npm run dev打开http://localhost:3000在您的浏览器中。您应该看到：
- 带有地平面的3D画布
- 命令输入界面
- WebSocket连接状态指示器
3.配置克劳德桌面
将以下内容添加到您的Claude Desktop配置中：
在 macOS 上： ~/Library/Application Support/Claude/claude_desktop_config.json 在Windows上： %APPDATA%\Claude\claude_desktop_config.json
{
"mcpServers": {
"babylonjs": {
"command": "node",
"args": ["/absolute/path/to/babylonjs-mcpV2/dist/mcp-stdio-server.js"]
}
}
}替换 /absolute/path/to/babylonjs-mcpV2 了解项目的实际路径。
4.测试连接
- 重新启动克劳德桌面
- 确保浏览器应用程序显示“已连接”状态
- 在Claude中，您现在可以使用以下命令：
- “创建一个名为myBox的红色框” - “删除myBox” - “列出所有对象” - “选择myBox”
可用命令
MCP服务器公开了以下工具：
- 创建对象：创建三维对象
- shape：长方体、球体、圆柱体、圆锥体或环面 - name：对象的唯一标识符 - position：（可选）{x，y，z}坐标 - size：（可选）比例因子 - color：（可选）{r，g，b}值（0-1）
- 删除对象：按名称删除对象
- name：要删除的对象的标识符
- 选择对象：突出显示对象
- name：要选择的对象的标识符
- list_objects：获取场景中的所有对象
发展
项目结构
src/
├── core/ # Core business logic
│ ├── babylon-scene.ts # 3D scene management
│ ├── command-parser.ts # Text command parsing
│ ├── mcp-server.ts # MCP server implementation
│ ├── websocket-client.ts # WebSocket client for browser
│ └── types.ts # TypeScript types
├── react/ # React components
│ └── BabylonMCP.tsx # Main React component
├── vanilla/ # Vanilla JS implementation
│ └── index.ts # Browser entry point
├── mcp-stdio-server.ts # MCP server executable
└── App.tsx # React demo app脚本
npm run dev-启动开发服务器npm run build-构建一切npm run build:server-仅构建MCP服务器npm run typecheck-运行TypeScript类型检查npm run test:simple-提供香草HTML测试页面
没有克劳德的测试
您可以单独测试浏览器应用程序：
- 仅启动开发服务器：
npm run dev - 打开http://localhost:3000
- 使用命令输入进行本地测试（WebSocket连接将显示为断开连接）
故障排除
WebSocket连接问题
- 确保MCP服务器正在运行(
node dist/mcp-stdio-server.js) - 检查端口8080是否未被其他应用程序使用
- 在浏览器控制台中查找错误
- 检查终端中的MCP服务器日志
Claude Desktop找不到服务器
- 确保路径
claude_desktop_config.json是绝对的 - 确保指定路径中存在MCP服务器文件
- 配置更改后重新启动Claude Desktop
- 检查Claude Desktop日志中与MCP相关的错误
构建错误
- 确保安装了所有依赖项：
npm install - 清除dist文件夹并重新生成：
rm -rf dist && npm run build - 检查TypeScript错误：
npm run typecheck
许可证
麻省理工学院