Three.js DevTools MCP

threejs-devtools-mcp

Three.js のシーンをリアルタイムで調査し、ブラウザー上で変更をライブプレビューして、コードに反映するための MCP サーバーです。69 個のツールで、オブジェクト、マテリアル、シェーダー、テクスチャ、アニメーション、パフォーマンスとメモリのほか、ウェブサイトの監査、動画フレームのキャプチャ、Playwright ヘルパーにも対応しています。

プロジェクトに変更を加える必要はありません。 vanilla Three.js と React Three Fiber の両方で動作し、WebGLRenderer と WebGPURenderer に対応しています。

セットアップ

1. MCP サーバーを追加する

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

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

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

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

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

{
  "$schema": "https://opencode.ai/config.json",
  "mcp": {
    "threejs-devtools-mcp": {
      "type": "local",
      "command": ["npx", "-y", "threejs-devtools-mcp"],
      "enabled": true
    }
  }
}

2. 開発サーバーを起動してブラウザーを開く

通常どおり Three.js の開発サーバーを起動します（npm run dev）。MCP サーバーは package.json からポートを自動検出し、開発ツールブリッジを挿入した状態で localhost:9222 のブラウザーを開きます。

ブラウザーのタブを開いたままにしてください。 MCP サーバーは WebSocket ブリッジを介してシーンと通信します。タブを閉じると、ツールは動作しなくなります。

3. シーンについて AI に質問する

"show me the scene tree"
"why is my model invisible?"
"try the car in red"          ← live preview, nothing saved
"keep it"                     ← written into your code
"audit this site for mobile"
"record a 5-second clip at 60 fps"

今すぐ確認するか、コードを変更するか

各ツールにはラベルが付いているため、ファイルに影響する操作をユーザーと AI が常に把握できます：

ライブプレビューで加えた変更はすべて記録されます。pending_changes を実行すると、変更ごとに変更前 → 変更後の内容と、そのまま貼り付けられるコード（vanilla Three.js と React Three Fiber）が返され、プロジェクト内の該当箇所も示されます。revert_changes を使うと、ブラウザー上で変更を元に戻せます。

ウェブサイトと動画向け

• web_audit：ぼやけたキャンバス（ピクセル比、リサイズ処理の不足）、バッテリー消費（アイドル時や画面外でのレンダリング）、大きすぎるテクスチャ（サイズ超過、KTX2 未使用）、高負荷なシャドウ、誤った色空間、過剰なドローコールを検出します。各検出項目には修正方法が示されます。
• capture_frames：プロモーション動画やリール用のフレームシーケンスを記録します。時間を仮想化するため、シーンのレンダリングが遅くても、出力は 30/60 fps で完全に滑らかです。MP4/WebM 用の ffmpeg コマンドも取得できます。

スキル

すぐに使えるワークフローが、Claude Code、Cursor などのクライアントでスラッシュコマンドとして利用できます：inspect-scene、try-look、apply-to-code、web-perf-audit、prepare-video、debug-invisible、playwright-setup。

Playwright & Puppeteer

どの接続方法でも同じツールを利用できます。接続方法は、独自のブラウザー（デフォルト）、サーバーが起動する Chrome（HEADLESS / CDP_PORT。Playwright MCP と共有可能）、または独自のテストの 3 つです。

import { attachDevtools, waitForScene, threeCall } from 'threejs-devtools-mcp/playwright';

await attachDevtools(context, { connect: false });
await page.goto('http://localhost:5173');
await waitForScene(page);
expect((await threeCall(page, 'object_details', { name: 'Car' })).visible).toBe(true);

ブラウザー、Puppeteer、Playwrightをご覧ください。

ブラウザー内オーバーレイ

パフォーマンス統計のリアルタイム表示、操作可能なシーングラフ、マテリアルエディター、3D オブジェクトのプレビューを備えた、組み込みの開発者ツールパネルです。自動的に、またはtoggle_overlayツールから有効になります。

ヒント：オブジェクトに名前を付けましょう

名前のないオブジェクトは、シーンツリーに(unnamed)と表示されます。名前を付けると、オブジェクトを見つけて変更しやすくなります。

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

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

ドキュメント

• ツールリファレンス — モード別の全 69 ツール、スキル、パラメーター
• ブラウザー、Puppeteer、Playwright — 接続モード、E2E テスト、CI のヒント
• 高度なセットアップ — アニメーション、シーンのエクスポート、設定、トランスポート
• Cursor のセットアップ — Cursor のステップバイステップガイド
• トークン効率のよいワークフロー — コンテキストを節約するためのベストプラクティス

ライセンス

MIT