Three.js Mcp

Threejs-mcp

一个用于生成 Three.js 代码的 MCP 服务。

工具

类别	工具
场景与渲染器	scene_setup, html_template
摄像机	perspective_camera, orthographic_camera
几何体	geometry, extrude_geometry, lathe_geometry, tube_geometry
材质	material, shader_material
网格	mesh, instanced_mesh, group
灯光	ambient_light, directional_light, point_light, spot_light, hemisphere_light, rect_area_light
控件	orbit_controls, fly_controls, pointer_lock_controls, transform_controls
加载器	gltf_loader, texture_loader, cube_texture_loader, hdr_environment, fbx_loader
动画	animation_loop, keyframe_animation, tween_animation
交互	raycaster
辅助工具	debug_helpers, light_helpers
后期处理	postprocessing_setup
环境	ground_plane, skybox, water_surface, particles, reflective_surface, lensflare
UI	css2d_label
物理	rapier_physics
XR	webxr_setup
实用工具	math_utils, dispose_resources

先决条件

• Python 3.13+
• uv

安装

克隆此代码仓库，然后更新 run.sh 中的路径，使其指向克隆后的目录：

#!/bin/zsh
source ~/.zshrc
exec uv run --directory /path/to/threejs-mcp threejs-mcp

将脚本设为可执行：

chmod +x run.sh

然后按照下方对应 MCP 客户端的说明操作。将 /path/to/threejs-mcp/run.sh 替换为脚本的实际路径。

Claude Code

claude mcp add threejs -s user -- /path/to/threejs-mcp/run.sh

作用范围（-s）可以是 user、project 或 local。

Claude Desktop

打开 设置 > 开发者 > 编辑配置，并添加到 claude_desktop_config.json：

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Cursor

打开 设置 > MCP > 添加新的全局 MCP 服务，并添加到 ~/.cursor/mcp.json：

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

或者，在项目根目录的 .cursor/mcp.json 中添加，以配置项目范围。

Windsurf

打开 设置 > MCP > 添加服务 > 添加自定义服务，并添加到 MCP 配置中：

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

VS Code / GitHub Copilot

添加到用户或工作区的 settings.json：

{
  "mcp": {
    "servers": {
      "threejs": {
        "command": "/path/to/threejs-mcp/run.sh"
      }
    }
  }
}

或者，在项目根目录创建 .vscode/mcp.json：

{
  "servers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Zed

添加到 Zed 设置（~/.config/zed/settings.json）：

{
  "context_servers": {
    "threejs": {
      "command": {
        "path": "/path/to/threejs-mcp/run.sh"
      }
    }
  }
}

Cline

打开 设置 > MCP 服务 > 编辑 MCP 设置，并添加到配置中：

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

Continue

添加到 ~/.continue/config.yaml：

mcpServers:
  - name: threejs
    command: /path/to/threejs-mcp/run.sh

Roo Code

打开 设置 > MCP > 编辑 MCP 设置，并添加：

{
  "mcpServers": {
    "threejs": {
      "command": "/path/to/threejs-mcp/run.sh"
    }
  }
}

其他 MCP 客户端

这是一个标准的 stdio MCP 服务。使用以下命令运行：

/path/to/threejs-mcp/run.sh

抓取文档

docs/ 目录包含从 Three.js 文档抓取并精简后的 Markdown。重新生成：

uv run python scrape_docs.py

这需要 httpx 和 beautifulsoup4 包（不包含在主要依赖项中）。