AI导哈

3D对象操作服务

Babylon.js MCP Server是一个允许AI助手通过文本命令创建和操作Babylon.js场景中3D对象的模型上下文协议服务器。

  • by davidvanstory
  • TypeScript
  • 本地部署
  • 9 星标
  • 更新于
在 GitHub 查看 davidvanstory/babylonjs-mcp

使用说明

Babylon.js MCP服务器

MCP（模型上下文协议）服务器，允许Claude等AI助手通过文本命令在Babylon.js场景中创建和操纵3D对象。

特性

  • 创建具有可自定义属性的三维对象（长方体、球体、圆柱体、圆锥体、圆环体）
  • 按名称删除对象
  • 选择要突出显示的对象
  • 列出场景中的所有对象
  • MCP服务器与浏览器之间的实时WebSocket通信
  • React和vanilla JavaScript实现

建筑

┌─────────────────┐     ┌──────────────────┐     ┌─────────────────┐
│  Claude Desktop │────▶│   MCP Server     │────▶│  Browser App    │
│                 │     │  (stdio + WS)    │     │  (Babylon.js)   │
└─────────────────┘     └──────────────────┘     └─────────────────┘

安装

  1. 克隆存储库：
git clone <repository-url>
cd babylonjs-mcpV2
  1. 安装依赖项：
npm install
  1. 构建项目：
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.测试连接

  1. 重新启动克劳德桌面
  2. 确保浏览器应用程序显示“已连接”状态
  3. 在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测试页面

没有克劳德的测试

您可以单独测试浏览器应用程序：

  1. 仅启动开发服务器： npm run dev
  2. 打开http://localhost:3000
  3. 使用命令输入进行本地测试（WebSocket连接将显示为断开连接）

故障排除

WebSocket连接问题

  1. 确保MCP服务器正在运行(node dist/mcp-stdio-server.js)
  2. 检查端口8080是否未被其他应用程序使用
  3. 在浏览器控制台中查找错误
  4. 检查终端中的MCP服务器日志

Claude Desktop找不到服务器

  1. 确保路径 claude_desktop_config.json 是绝对的
  2. 确保指定路径中存在MCP服务器文件
  3. 配置更改后重新启动Claude Desktop
  4. 检查Claude Desktop日志中与MCP相关的错误

构建错误

  1. 确保安装了所有依赖项： npm install
  2. 清除dist文件夹并重新生成： rm -rf dist && npm run build
  3. 检查TypeScript错误： npm run typecheck

许可证

麻省理工学院

相关 MCP