一个用于实时检查和修改Three.js场景的MCP服务器

提供52种工具用于对象、材质、着色器、纹理、动画、性能监控、内存诊断和代码生成。

.添加MCP服务器

Claude Code

BASH

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

Claude Desktop

添加 claude_desktop_config.json:

JSON

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

Cursor

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

JSON

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

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

Windsurf

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

JSON

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

VS Code (Copilot)

``

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 工具。

提示：命名对象

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

JS

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

JSX

1
2
// React Three Fiber
<mesh name="player" geometry={geometry} material={material} />

🏗️ 场景结构

工具	作用
scene_tree	查看整个 Three.js 场景的对象树（Mesh、Light、Group 等）
find_objects	按类型 / 名字 / 材质等条件搜索对象

📦 对象详情

工具	作用
object_details	查某个对象的位置、旋转、缩放
geometry_details	查几何体（顶点数、面数、边界框）
material_details	查材质（颜色、贴图、uniforms）

🎨 材质 & 贴图

工具	作用
material_list	列出场景所有材质
texture_list	列出所有贴图
texture_preview	预览某个贴图

📊 性能 & 调试

工具	作用
perf_monitor	测 FPS、帧时间、卡顿次数
performance_snapshot	查 draw calls、三角形数量、对象统计
memory_stats	GPU 内存占用分析
console_capture	捕获浏览器控制台日志

🖼️ 可视化

工具	作用
annotated_screenshot	截图并在对象位置标注名字
take_screenshot	纯截图
bounding_boxes	显示所有物体的包围盒

🔧 调试辅助

工具	作用
highlight_object	高亮某个对象（线框或显隐切换）
toggle_wireframe	切换线框模式
click_inspect	开启点击模式，点场景中的物体来查看它
add_helper	添加辅助线（坐标轴、箭头、网格等）

使用示例

直接让我帮你查，比如你说：

"帮我看看当前场景有哪些灯光"

Ai会调用：

scene_tree / find_objects (type: "Light")