Three.js 也有 MCP 了：让 AI 实时读场景树、改材质、查内存泄漏

调试 Three.js 场景有一个很常见的场景：你加了一个模型，但它不在你以为的位置。于是你打开 Chrome DevTools，试图在渲染输出里找哪里出了问题——但 Three.js 没有官方的浏览器扩展，场景树得自己打出来，材质属性得一个个 console.log，内存泄漏更是靠感觉猜。

threejs-devtools-mcp 换了一条路：它把 Three.js 场景的调试能力包装成一个 MCP 服务器，让 AI 编辑器（Claude Code、Cursor、Windsurf 等）直接连上你的浏览器场景。你不需要打开 DevTools，直接跟 AI 说"查一下场景树"、"把这个材质改成红色"、"检查有没有内存泄漏"——AI 调用工具，结果直接反馈给你。 GitHub：https://github.com/DmitriyGolub/threejs-devtools-mcp (opens in a new tab)

MCP 是什么，为什么和 Three.js 搭上了

MCP（Model Context Protocol）是 Anthropic 推出的一个开放标准，定义了 AI 如何调用外部工具和系统。简单说，它是一种协议，让 Claude Code 这类 AI 编辑器不只能读写文件，还能调用各种自定义能力——比如查数据库、调用 API，或者现在这个：实时检查浏览器里跑着的 Three.js 场景。

threejs-devtools-mcp 就是按这个协议实现的服务器。它启动之后，会在 localhost:9222 注入一个 devtools 桥接面板，通过 WebSocket 和浏览器里正在运行的 Three.js 场景保持连接。AI 编辑器通过 MCP 协议向服务器发指令，服务器再通过 WebSocket 读取或修改场景，结果传回来。

AI 编辑器（Claude Code / Cursor）
       ↓ MCP 协议
threejs-devtools-mcp 服务器
       ↓ WebSocket
浏览器里的 Three.js 场景

有一个细节要注意：这条链路需要浏览器标签页保持打开。关掉 tab，连接就断了，工具就停了。

52 个工具覆盖了什么

项目提供 52 个工具，按调试场景分成几类：

场景检查：遍历场景树、查看任意对象的属性、定位隐藏或异常的物体。以前要手动 console.log(scene.children) 递归打印，现在直接问 AI。

材质与着色器：实时修改材质颜色、透明度、金属度等属性，甚至可以直接编辑 shader 代码。这个对调整视觉效果时特别有用——改一个参数，AI 执行，视口立刻变化，不用重新保存文件等热更新。

性能监控：查询当前 FPS、draw call 数量、渲染统计数据。Three.js 场景在复杂以后很容易出现性能问题，这类数据以前要手动接入 Stats.js，现在直接问。

内存诊断：检测内存泄漏。Three.js 里 geometry 和 texture 不手动 dispose 会一直占用 GPU 内存，这是很多项目的隐患。通过工具可以看到哪些资源没被释放。

动画控制：查看和控制场景里的动画状态，包括 AnimationMixer 的播放情况。

代码生成：从 3D 模型资源直接生成 React Three Fiber 组件。把 character.glb 丢进去，让 AI 生成对应的 R3F 代码。

接入只需要一行命令

对于 Claude Code 用户，在项目里加一行就够了：

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

其他编辑器（Cursor、Windsurf、VS Code Copilot）需要在配置文件里手动加一段 MCP 服务器配置：

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

接入之后，启动你的 Three.js 开发服务器，浏览器打开页面，MCP 服务器自动检测端口并建立连接。之后就可以在 AI 编辑器里直接用自然语言操作场景了。

项目兼容原生 Three.js、React Three Fiber 以及其他基于 Three.js 的框架，不需要修改现有代码。

这个工具解决的是什么问题

Three.js 一直缺一个像 React DevTools 那样顺手的调试工具。React 生态有官方 DevTools 扩展，可以在浏览器里直接看组件树、改 props；Three.js 没有。

threejs-devtools-mcp 做的事情有点像把这个能力交给了 AI：你不用在 DevTools 里手动挖，直接描述你想要的信息，AI 通过工具拿回来告诉你。对于那些"为什么这个对象不渲染"、"这个材质参数对不对"、"场景里有多少个 mesh"之类的问题，这个交互方式会比手动翻日志快很多。

写在最后

项目目前还比较新（25 Star，v0.4.0），功能覆盖面已经不小，但稳定性和边界情况还有待更多人用起来验证。如果你在日常开发里已经在用 Claude Code 或 Cursor，接入成本很低，可以直接试试——调试一个复杂 Three.js 场景时，能省不少来回切工具的时间。

GitHub：https://github.com/DmitriyGolub/threejs-devtools-mcp (opens in a new tab)