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

Settings > Developer > Edit Config を開き、claude_desktop_config.json に次の内容を追加します。

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

Cursor

Settings > MCP > Add new global MCP server を開き、~/.cursor/mcp.json に次の内容を追加します。

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

または、プロジェクトスコープの設定にするには、プロジェクトのルートにある .cursor/mcp.json に追加します。

Windsurf

Settings > MCP > Add Server > Add custom server を開き、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

Settings > MCP Servers > Edit MCP Settings を開き、設定に次の内容を追加します。

{
  "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

Settings > MCP > Edit MCP Settings を開き、次の内容を追加します。

{
  "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 パッケージが必要です（メインの依存関係には含まれていません）。