threejs-devtools-mcp

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

threejs-devtools-mcp

Skill by ara.so — Devtools Skills collection.

MCP server providing 59 tools for inspecting and modifying Three.js scenes in real time. Works with vanilla Three.js, React Three Fiber, and any framework. Zero code changes required — connects via Chrome DevTools Protocol.

由ara.so开发的Skill——Devtools Skills合集。

这款MCP服务器提供59种工具，可实时检查和修改Three.js场景。支持原生Three.js、React Three Fiber及任意框架，无需修改代码——通过Chrome DevTools Protocol建立连接。

Installation

安装

Claude Code

bash

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

bash

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

Claude Desktop

Add to

claude_desktop_config.json

json

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

添加到

claude_desktop_config.json

文件中：

json

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

Cursor

Add to

.cursor/mcp.json

json

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

添加到

.cursor/mcp.json

文件中：

json

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

Windsurf

Add to

~/.codeium/windsurf/mcp_config.json

json

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

添加到

~/.codeium/windsurf/mcp_config.json

文件中：

json

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

VS Code (Copilot)

Add to

.vscode/mcp.json

json

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

添加到

.vscode/mcp.json

文件中：

json

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

How It Works

工作原理

Start your dev server —
```
npm run dev
```
or your usual command
MCP server auto-detects port from package.json and opens Chrome at
```
localhost:9222
```
Keep the browser tab open — MCP connects via WebSocket bridge
Ask the AI — "show me the scene tree", "make the car red", etc.

The browser tab must stay open for tools to work. The MCP server injects a WebSocket bridge that communicates with the Three.js scene.

启动开发服务器 — 执行
```
npm run dev
```
或你常用的命令
MCP服务器自动检测端口 — 从package.json中读取端口，并在
```
localhost:9222
```
打开Chrome浏览器
保持浏览器标签页打开 — MCP通过WebSocket桥接建立连接
向AI发起请求 — 例如“显示场景树”、“把汽车改成红色”等

工具运行期间必须保持浏览器标签页处于打开状态。MCP服务器会注入一个WebSocket桥接程序，与Three.js场景进行通信。

Core Tool Categories

核心工具分类

Scene Inspection

场景检查

```
get_scene_tree
```
— Full scene hierarchy with objects, materials, geometries
```
get_object_details
```
— Properties, transforms, visibility, parent/child info
```
find_objects
```
— Search by name, type, or material
```
get_cameras
```
— List all cameras with properties
```
get_lights
```
— All lights (ambient, directional, point, spot, hemisphere)

```
get_scene_tree
```
— 包含对象、材质、几何体的完整场景层级结构
```
get_object_details
```
— 对象属性、变换信息、可见性、父子关系
```
find_objects
```
— 按名称、类型或材质搜索对象
```
get_cameras
```
— 列出所有相机及其属性
```
get_lights
```
— 列出所有光源（环境光、平行光、点光源、聚光灯、半球光）

Material & Shader Management

材质与着色器管理

```
get_materials
```
— All materials with properties (color, opacity, metalness, roughness)
```
update_material
```
— Modify color, opacity, metalness, roughness, emissive, wireframe
```
get_shaders
```
— List custom ShaderMaterial and RawShaderMaterial
```
update_shader
```
— Edit vertex/fragment shaders, uniforms
```
get_textures
```
— All textures with size, format, mipmaps, anisotropy

```
get_materials
```
— 列出所有材质及其属性（颜色、透明度、金属度、粗糙度）
```
update_material
```
— 修改颜色、透明度、金属度、粗糙度、自发光、线框模式
```
get_shaders
```
— 列出自定义ShaderMaterial和RawShaderMaterial
```
update_shader
```
— 编辑顶点/片段着色器、 uniforms
```
get_textures
```
— 列出所有纹理及其尺寸、格式、mipmap、各向异性参数

Object Manipulation

对象操作

```
update_object_transform
```
— Position, rotation, scale
```
toggle_object_visibility
```
— Show/hide objects
```
get_object_bounds
```
— Bounding box and sphere
```
clone_object
```
— Duplicate with transform offset

```
update_object_transform
```
— 修改位置、旋转、缩放参数
```
toggle_object_visibility
```
— 显示/隐藏对象
```
get_object_bounds
```
— 获取对象的包围盒和包围球
```
clone_object
```
— 复制对象并设置变换偏移

Performance Monitoring

性能监控

```
get_performance_stats
```
— FPS, frame time, memory, draw calls, triangles
```
start_performance_monitoring
```
— Continuous tracking with warnings
```
get_memory_info
```
— Geometries, textures, programs, heap usage
```
get_render_info
```
— Draw calls, triangles, points, lines, programs

```
get_performance_stats
```
— 获取FPS、帧时间、内存、绘制调用数、三角形数量
```
start_performance_monitoring
```
— 持续跟踪性能并发出警告
```
get_memory_info
```
— 获取几何体、纹理、程序、堆内存使用情况
```
get_render_info
```
— 获取绘制调用数、三角形数量、点数量、线数量、程序数量

Animation

动画

```
get_animations
```
— All AnimationClip data
```
play_animation
```
— Start animation by name with loop/speed control
```
pause_animation
```
— Pause running animation
```
get_animation_state
```
— Current playback state

```
get_animations
```
— 获取所有AnimationClip数据
```
play_animation
```
— 按名称启动动画，支持循环/速度控制
```
pause_animation
```
— 暂停正在运行的动画
```
get_animation_state
```
— 获取当前播放状态

Code Generation

代码生成

```
generate_react_component
```
— Create React Three Fiber component from GLTF/GLB
```
generate_material_code
```
— Export material as Three.js or R3F code
```
export_scene
```
— Export scene as JSON or R3F JSX

```
generate_react_component
```
— 从GLTF/GLB模型创建React Three Fiber组件
```
generate_material_code
```
— 将材质导出为Three.js或R3F代码
```
export_scene
```
— 将场景导出为JSON或R3F JSX格式

Debugging

调试

```
toggle_overlay
```
— Show/hide in-browser devtools panel
```
check_common_issues
```
— Detect invisible objects, missing materials, zero-scale, etc.
```
get_object_world_position
```
— World space coordinates

```
toggle_overlay
```
— 显示/隐藏浏览器内调试面板
```
check_common_issues
```
— 检测不可见对象、缺失材质、零缩放等常见问题
```
get_object_world_position
```
— 获取对象的世界空间坐标

Workflow Examples

工作流示例

Debugging Invisible Objects

调试不可见对象

typescript

// User: "My model isn't showing up"

// 1. Get scene tree to find objects
await use_mcp_tool("threejs-devtools-mcp", "get_scene_tree", {});

// 2. Check common issues
await use_mcp_tool("threejs-devtools-mcp", "check_common_issues", {});

// 3. If object found but invisible, get details
await use_mcp_tool("threejs-devtools-mcp", "get_object_details", {
  objectPath: "Scene/MyModel"
});

// 4. Check if it's visible and has material
// If not visible:
await use_mcp_tool("threejs-devtools-mcp", "toggle_object_visibility", {
  objectPath: "Scene/MyModel",
  visible: true
});

// 5. Check if it's inside camera frustum
await use_mcp_tool("threejs-devtools-mcp", "get_object_world_position", {
  objectPath: "Scene/MyModel"
});

typescript

// 用户："我的模型不显示"

// 1. 获取场景树查找对象
await use_mcp_tool("threejs-devtools-mcp", "get_scene_tree", {});

// 2. 检查常见问题
await use_mcp_tool("threejs-devtools-mcp", "check_common_issues", {});

// 3. 如果找到对象但不可见，获取详细信息
await use_mcp_tool("threejs-devtools-mcp", "get_object_details", {
  objectPath: "Scene/MyModel"
});

// 4. 检查对象是否可见并拥有材质
// 如果不可见：
await use_mcp_tool("threejs-devtools-mcp", "toggle_object_visibility", {
  objectPath: "Scene/MyModel",
  visible: true
});

// 5. 检查对象是否在相机视锥体范围内
await use_mcp_tool("threejs-devtools-mcp", "get_object_world_position", {
  objectPath: "Scene/MyModel"
});

Editing Materials

编辑材质

typescript

// User: "Make the car red and metallic"

// 1. Find the car object
await use_mcp_tool("threejs-devtools-mcp", "find_objects", {
  name: "car"
});

// 2. Update material
await use_mcp_tool("threejs-devtools-mcp", "update_material", {
  materialPath: "Scene/Car/Body/material",
  properties: {
    color: "#ff0000",
    metalness: 0.8,
    roughness: 0.2
  }
});

typescript

// 用户："把汽车改成红色并设置为金属质感"

// 1. 查找汽车对象
await use_mcp_tool("threejs-devtools-mcp", "find_objects", {
  name: "car"
});

// 2. 更新材质
await use_mcp_tool("threejs-devtools-mcp", "update_material", {
  materialPath: "Scene/Car/Body/material",
  properties: {
    color: "#ff0000",
    metalness: 0.8,
    roughness: 0.2
  }
});

Performance Optimization

性能优化

typescript

// User: "Why is my scene laggy?"

// 1. Get current performance stats
await use_mcp_tool("threejs-devtools-mcp", "get_performance_stats", {});

// 2. Check render info for draw call count
await use_mcp_tool("threejs-devtools-mcp", "get_render_info", {});

// 3. Check memory usage
await use_mcp_tool("threejs-devtools-mcp", "get_memory_info", {});

// 4. Start continuous monitoring
await use_mcp_tool("threejs-devtools-mcp", "start_performance_monitoring", {
  duration: 10,
  interval: 1
});

// Identify issues:
// - High draw calls → merge geometries
// - High triangle count → use LOD
// - Memory growth → check for leaks, dispose unused resources

typescript

// 用户："为什么我的场景卡顿？"

// 1. 获取当前性能统计
await use_mcp_tool("threejs-devtools-mcp", "get_performance_stats", {});

// 2. 检查渲染信息中的绘制调用数
await use_mcp_tool("threejs-devtools-mcp", "get_render_info", {});

// 3. 检查内存使用情况
await use_mcp_tool("threejs-devtools-mcp", "get_memory_info", {});

// 4. 启动持续监控
await use_mcp_tool("threejs-devtools-mcp", "start_performance_monitoring", {
  duration: 10,
  interval: 1
});

// 识别问题：
// - 绘制调用数过高 → 合并几何体
// - 三角形数量过多 → 使用LOD（细节层次）
// - 内存增长 → 检查内存泄漏，释放未使用资源

Shader Debugging

着色器调试

typescript

// User: "My custom shader isn't working"

// 1. List all shaders
await use_mcp_tool("threejs-devtools-mcp", "get_shaders", {});

// 2. Get shader source
// (shader details included in get_shaders response)

// 3. Update shader with fixes
await use_mcp_tool("threejs-devtools-mcp", "update_shader", {
  shaderPath: "Scene/CustomMesh/material",
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    varying vec2 vUv;
    void main() {
      gl_FragColor = vec4(vUv, sin(time), 1.0);
    }
  `,
  uniforms: {
    time: { value: 0.0 }
  }
});

typescript

// 用户："我的自定义着色器不工作"

// 1. 列出所有着色器
await use_mcp_tool("threejs-devtools-mcp", "get_shaders", {});

// 2. 获取着色器源码
//（着色器详情包含在get_shaders的响应中）

// 3. 更新着色器并修复问题
await use_mcp_tool("threejs-devtools-mcp", "update_shader", {
  shaderPath: "Scene/CustomMesh/material",
  vertexShader: `
    varying vec2 vUv;
    void main() {
      vUv = uv;
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
  `,
  fragmentShader: `
    uniform float time;
    varying vec2 vUv;
    void main() {
      gl_FragColor = vec4(vUv, sin(time), 1.0);
    }
  `,
  uniforms: {
    time: { value: 0.0 }
  }
});

Generating React Components

生成React组件

typescript

// User: "Create a React component from my GLTF model"

await use_mcp_tool("threejs-devtools-mcp", "generate_react_component", {
  modelPath: "/models/character.glb",
  componentName: "Character",
  includeAnimations: true,
  includeLights: false
});

// Returns JSX code ready to use:
/*
import { useGLTF, useAnimations } from '@react-three/drei'
import { useRef, useEffect } from 'react'

export function Character(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/models/character.glb')
  const { actions } = useAnimations(animations, group)
  
  useEffect(() => {
    actions['Idle']?.play()
  }, [actions])
  
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.Body.geometry} material={materials.Skin} />
    </group>
  )
}
*/

typescript

// 用户："从我的GLTF模型创建React组件"

await use_mcp_tool("threejs-devtools-mcp", "generate_react_component", {
  modelPath: "/models/character.glb",
  componentName: "Character",
  includeAnimations: true,
  includeLights: false
});

// 返回可直接使用的JSX代码：
/*
import { useGLTF, useAnimations } from '@react-three/drei'
import { useRef, useEffect } from 'react'

export function Character(props) {
  const group = useRef()
  const { nodes, materials, animations } = useGLTF('/models/character.glb')
  const { actions } = useAnimations(animations, group)
  
  useEffect(() => {
    actions['Idle']?.play()
  }, [actions])
  
  return (
    <group ref={group} {...props} dispose={null}>
      <mesh geometry={nodes.Body.geometry} material={materials.Skin} />
    </group>
  )
}
*/

Object Path Format

对象路径格式

Tools use hierarchical paths to identify objects:

```
Scene
```
— root scene
```
Scene/Player
```
— direct child named "Player"
```
Scene/Group/Mesh
```
— nested object
```
Scene/Car/(unnamed)/Wheel
```
— unnamed intermediate object

Tip: Name your objects for easier access:

javascript

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

// React Three Fiber
<mesh name="player" />

工具使用层级路径来识别对象：

```
Scene
```
— 根场景
```
Scene/Player
```
— 名为"Player"的直接子对象
```
Scene/Group/Mesh
```
— 嵌套对象
```
Scene/Car/(unnamed)/Wheel
```
— 包含未命名中间对象的路径

提示： 给对象命名以便更轻松地访问：

javascript

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

// React Three Fiber
<mesh name="player" />

Common Material Properties

常用材质属性

When using

update_material

typescript

{
  color: "#ff0000",           // hex color
  opacity: 0.5,               // 0-1
  transparent: true,          // boolean
  metalness: 0.8,             // 0-1 (MeshStandardMaterial)
  roughness: 0.2,             // 0-1 (MeshStandardMaterial)
  emissive: "#00ff00",        // hex color
  emissiveIntensity: 0.5,     // 0-1
  wireframe: true,            // boolean
  side: "DoubleSide",         // "FrontSide" | "BackSide" | "DoubleSide"
  visible: true               // boolean
}

使用

update_material

时可修改的属性：

typescript

{
  color: "#ff0000",           // 十六进制颜色
  opacity: 0.5,               // 0-1
  transparent: true,          // 布尔值
  metalness: 0.8,             // 0-1（MeshStandardMaterial）
  roughness: 0.2,             // 0-1（MeshStandardMaterial）
  emissive: "#00ff00",        // 十六进制颜色
  emissiveIntensity: 0.5,     // 0-1
  wireframe: true,            // 布尔值
  side: "DoubleSide",         // "FrontSide" | "BackSide" | "DoubleSide"
  visible: true               // 布尔值
}

Animation Control

动画控制

typescript

// Play animation
await use_mcp_tool("threejs-devtools-mcp", "play_animation", {
  clipName: "Walk",
  loop: true,
  timeScale: 1.0
});

// Pause
await use_mcp_tool("threejs-devtools-mcp", "pause_animation", {
  clipName: "Walk"
});

// Check state
await use_mcp_tool("threejs-devtools-mcp", "get_animation_state", {});

typescript

// 播放动画
await use_mcp_tool("threejs-devtools-mcp", "play_animation", {
  clipName: "Walk",
  loop: true,
  timeScale: 1.0
});

// 暂停动画
await use_mcp_tool("threejs-devtools-mcp", "pause_animation", {
  clipName: "Walk"
});

// 检查动画状态
await use_mcp_tool("threejs-devtools-mcp", "get_animation_state", {});

Configuration

配置

Create

threejs-devtools.config.json

in project root:

json

{
  "port": 5173,
  "chromePath": "/usr/bin/google-chrome",
  "debugPort": 9222,
  "autoOpenOverlay": true,
  "performanceThresholds": {
    "fps": 30,
    "frameTime": 33,
    "drawCalls": 100
  }
}

Environment variables:

```
THREEJS_DEVTOOLS_PORT
```
— override dev server port
```
THREEJS_DEVTOOLS_CHROME_PATH
```
— custom Chrome/Chromium path
```
THREEJS_DEVTOOLS_DEBUG_PORT
```
— Chrome DevTools Protocol port

在项目根目录创建

threejs-devtools.config.json

文件：

json

{
  "port": 5173,
  "chromePath": "/usr/bin/google-chrome",
  "debugPort": 9222,
  "autoOpenOverlay": true,
  "performanceThresholds": {
    "fps": 30,
    "frameTime": 33,
    "drawCalls": 100
  }
}

环境变量：

```
THREEJS_DEVTOOLS_PORT
```
— 覆盖开发服务器端口
```
THREEJS_DEVTOOLS_CHROME_PATH
```
— 自定义Chrome/Chromium路径
```
THREEJS_DEVTOOLS_DEBUG_PORT
```
— Chrome DevTools Protocol端口

In-Browser Overlay

浏览器内覆盖面板

Toggle with

toggle_overlay

tool or activated automatically. Provides:

Performance panel — real-time FPS, frame time, memory
Scene graph — interactive tree with expand/collapse
Material editor — live color picker, sliders for metalness/roughness
Object inspector — transform, bounds, visibility
3D preview — isolated object rendering

可通过

toggle_overlay

工具切换，或自动激活。提供以下功能：

性能面板 — 实时FPS、帧时间、内存监控
场景图 — 可展开/折叠的交互式树状结构
材质编辑器 — 实时颜色选择器、金属度/粗糙度滑块
对象检查器 — 变换参数、边界、可见性设置
3D预览 — 对象隔离渲染

Troubleshooting

故障排查

Browser tab closes immediately

浏览器标签页立即关闭

Check if port is correct:

THREEJS_DEVTOOLS_PORT=3000 npx threejs-devtools-mcp

Verify dev server is running before starting MCP server

检查端口是否正确：

THREEJS_DEVTOOLS_PORT=3000 npx threejs-devtools-mcp

启动MCP服务器前确保开发服务器已运行

Tools return "not connected"

工具返回"未连接"

Ensure browser tab stays open
Check browser console for WebSocket errors
Restart MCP server if connection lost

确保浏览器标签页保持打开
检查浏览器控制台的WebSocket错误
连接丢失时重启MCP服务器

Objects not found

对象未找到

Use
```
get_scene_tree
```
to see actual object paths
Objects may be unnamed — shows as
```
(unnamed)
```
in path
Wait for GLTF models to load before querying

使用
```
get_scene_tree
```
查看实际对象路径
对象可能未命名——路径中显示为
```
(unnamed)
```
查询前等待GLTF模型加载完成

Material changes not visible

材质修改未生效

Check if material is used by multiple objects
Some properties require
```
transparent: true
```
(e.g., opacity < 1)
ShaderMaterial requires manual uniform updates

检查材质是否被多个对象使用
某些属性需要设置
```
transparent: true
```
（例如opacity < 1）
ShaderMaterial需要手动更新uniforms

Performance monitoring shows zeros

性能监控显示数值为0

Ensure renderer.info.autoReset is not disabled
Check if scene is actually rendering (camera, lights present)

确保renderer.info.autoReset未被禁用
检查场景是否实际在渲染（存在相机、光源）

Memory leaks detected

检测到内存泄漏

Call dispose() on geometries, materials, textures when removing objects
Use
```
get_memory_info
```
to track resource counts over time
Check for retained references in closures or event listeners

删除对象时调用dispose()释放几何体、材质、纹理
使用
```
get_memory_info
```
跟踪资源数量变化
检查闭包或事件监听器中是否存在保留引用

Token-Efficient Practices

高效Token使用技巧

Use
find_objects
before
get_scene_tree
— narrower scope
Chain related operations — get details + update in one turn
Cache object paths — reuse in conversation context
Use
check_common_issues
first — catches 80% of problems
Request specific properties — not full object dumps

先使用
find_objects
再调用
get_scene_tree
— 缩小查询范围
链式执行相关操作 — 一次对话中完成详情获取+更新操作
缓存对象路径 — 在对话上下文重复使用
先调用
check_common_issues
— 可解决80%的常见问题
请求特定属性 — 不要获取完整对象的所有数据

React Three Fiber Integration

React Three Fiber集成

Works seamlessly with R3F. Use

ref

to name objects:

jsx

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

function Box() {
  const ref = useRef()
  
  useFrame((state, delta) => {
    ref.current.rotation.x += delta
  })
  
  return (
    <mesh ref={ref} name="rotating-box">
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

Then from AI:

typescript

// "Stop the box rotation"
await use_mcp_tool("threejs-devtools-mcp", "get_object_details", {
  objectPath: "Scene/rotating-box"
});
// Developer removes useFrame hook based on AI suggestion

与R3F无缝兼容。使用

ref

给对象命名：

jsx

import { useRef } from 'react'
import { useFrame } from '@react-three/fiber'

function Box() {
  const ref = useRef()
  
  useFrame((state, delta) => {
    ref.current.rotation.x += delta
  })
  
  return (
    <mesh ref={ref} name="rotating-box">
      <boxGeometry />
      <meshStandardMaterial color="orange" />
    </mesh>
  )
}

然后向AI发起请求：

typescript

// "停止盒子的旋转"
await use_mcp_tool("threejs-devtools-mcp", "get_object_details", {
  objectPath: "Scene/rotating-box"
});
// 开发者根据AI建议移除useFrame钩子

Advanced: HTTP Transport (Cursor)

进阶：HTTP传输（Cursor）

For environments where stdio doesn't work:

json

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

Server runs on

http://localhost:3000

by default. Set

THREEJS_DEVTOOLS_HTTP_PORT

to change.

针对标准输入输出无法工作的环境：

json

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

服务器默认运行在

http://localhost:3000

。可设置

THREEJS_DEVTOOLS_HTTP_PORT

修改端口。

Example: Complete Debug Session

示例：完整调试会话

typescript

// User: "My 3D character model loads but is invisible and the scene is slow"

// 1. Check scene structure
const sceneTree = await use_mcp_tool("threejs-devtools-mcp", "get_scene_tree", {});
// Found: Scene/Character with multiple children

// 2. Check common issues
const issues = await use_mcp_tool("threejs-devtools-mcp", "check_common_issues", {});
// Found: Character has scale (0,0,0)

// 3. Fix scale
await use_mcp_tool("threejs-devtools-mcp", "update_object_transform", {
  objectPath: "Scene/Character",
  scale: { x: 1, y: 1, z: 1 }
});

// 4. Check performance
const perf = await use_mcp_tool("threejs-devtools-mcp", "get_performance_stats", {});
// FPS: 15, Draw calls: 450

// 5. Get render info to understand why
const renderInfo = await use_mcp_tool("threejs-devtools-mcp", "get_render_info", {});
// 450 draw calls → character has 450 separate meshes

// Suggestion: Merge geometries or use instancing
// Character now visible, identified performance bottleneck

typescript

// 用户："我的3D角色模型已加载但不可见，而且场景很卡顿"

// 1. 检查场景结构
const sceneTree = await use_mcp_tool("threejs-devtools-mcp", "get_scene_tree", {});
// 发现：Scene/Character包含多个子对象

// 2. 检查常见问题
const issues = await use_mcp_tool("threejs-devtools-mcp", "check_common_issues", {});
// 发现：Character的缩放为(0,0,0)

// 3. 修复缩放
await use_mcp_tool("threejs-devtools-mcp", "update_object_transform", {
  objectPath: "Scene/Character",
  scale: { x: 1, y: 1, z: 1 }
});

// 4. 检查性能
const perf = await use_mcp_tool("threejs-devtools-mcp", "get_performance_stats", {});
// FPS: 15, 绘制调用数: 450

// 5. 获取渲染信息分析原因
const renderInfo = await use_mcp_tool("threejs-devtools-mcp", "get_render_info", {});
// 450次绘制调用 → 角色包含450个独立网格

// 建议：合并几何体或使用实例化
// 角色现在可见，已识别性能瓶颈