Threejs Devtools MCP

threejs开发工具mcp

](https://www.npmjs.com/package/threejs-devtools-mcp)   

用于实时检查和修改Three.js场景的MCP服务器-- 59工具 用于对象、材质、着色器、纹理、动画、性能监控、内存诊断和代码生成。

您的项目没有任何更改。 适用于vanilla Three.js、React Three Fiber和任何框架。

Annotated screenshot

设置

1.添加MCP服务器

Claude Code

claude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp

Claude Desktop

添加 claude_desktop_config.json:

{
  "mcpServers": {
    "threejs-devtools-mcp": {
      "command": "npx",
      "args": ["-y", "threejs-devtools-mcp"]
    }
  }
}

Cursor

添加 .cursor/mcp.json 在您的项目中：

{
  "mcpServers": {
    "threejs-devtools-mcp": {
      "command": "npx",
      "args": ["-y", "threejs-devtools-mcp"]
    }
  }
}

或者使用HTTP传输——请参阅 光标设置指南.

Windsurf

添加 ~/.codeium/windsurf/mcp_config.json:

{
  "mcpServers": {
    "threejs-devtools-mcp": {
      "command": "npx",
      "args": ["-y", "threejs-devtools-mcp"]
    }
  }
}

VS Code (Copilot)

添加 .vscode/mcp.json:

{
  "servers": {
    "threejs-devtools-mcp": {
      "command": "npx",
      "args": ["-y", "threejs-devtools-mcp"]
    }
  }
}

OpenCode

添加 opencode.json 在您的项目中：

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "threejs-devtools-mcp": {
      "type": "local",
      "command": ["npx", "-y", "threejs-devtools-mcp"],
      "enabled": true
    }
  }
}

2.启动开发服务器并打开浏览器

像往常一样启动Three.js开发服务器(npm run dev).MCP服务器自动检测来自的端口 package.json 并打开浏览器 localhost:9222 通过注入devtools桥。

保持浏览器选项卡打开。 MCP服务器通过WebSocket网桥与您的场景进行通信。关闭选项卡=工具停止工作。

3.向AI询问你的场景

"show me the scene tree"
"why is my model invisible?"
"make the car red"
"check for memory leaks"
"what's my FPS?"
"generate a React component from character.glb"

浏览器内覆盖

内置的devtools面板，具有实时性能统计、交互式场景图、材质编辑器和3D对象预览。自动激活或通过 toggle_overlay 工具。

Overlay panel

提示：命名对象

未命名对象显示为 (unnamed) 在场景树中。命名对象更容易查找和修改：

// Three.js
mesh.name = "player";

// React Three Fiber

文档

• 工具参考 --所有59个带有参数的工具
• 高级设置 --动画、场景导出、配置、传输
• 光标设置 --Cursor的分步指南
• 令牌高效工作流程 --保存上下文的最佳实践

许可证

麻省理工学院