Three.js DevTools MCP

Name: Three.js DevTools MCP
Author: DmitriyGolub

โดย DmitriyGolubรุ่น 0.2.1i★ –iรันบนเครื่อง

ชื่อใน registryio.github.DmitriyGolub/threejs-devtools

ติดตั้ง

ภาพรวม

คำอธิบายจากผู้ทำ (ภาษาอังกฤษตามต้นฉบับ)

Inspect and edit Three.js scenes, materials, shaders, lights in real time from any AI agent

สามเสาของ PopNx MCP

สามเรื่องนี้ไม่รวมเป็นคะแนนเดียว เพราะความเห็น การวัด และความนิยม เป็นคนละเรื่องกัน

เสียงผู้ใช้iยังไม่มีรีวิวรีวิวเปิดพร้อมระบบบัญชีในขั้นถัดไป
ผลตรวจเบื้องต้นของเราiผ่าน 1 จาก 1 ข้อตรวจจากข้อมูลที่เปิดอยู่ ยังไม่ได้สแกนโค้ด
การใช้งานiยังไม่ได้วัด★ –

ใช้ทำอะไรได้

ตัวนี้ยังไม่ได้เรียบเรียงเป็นภาษาไทย ด้านล่างคือข้อเท็จจริงที่เราอ่านจาก registry

การเชื่อมต่อ: รันบนเครื่อง
ช่องทาง (transport): stdio
หมวด: อื่น ๆ

ติดตั้ง

เลือกโปรแกรม AI ที่คุณใช้ แล้วคัดลอกค่าตั้งไปวาง

ก่อนติดตั้ง

ผลตรวจเบื้องต้น: ผ่าน 1 จาก 1 ข้อ
รันในเครื่องคุณด้วยสิทธิ์ของผู้ใช้คุณ (ไฟล์ อินเทอร์เน็ต แอปต่าง ๆ)
ค่าที่คุณต้องใส่เอง: DEV_PORT, BRIDGE_PORT, BROWSER, HEADLESS, CHROME_PATH

ต้องเตรียมก่อน

npmติดตั้ง Node.js (มีคำสั่ง npx) ในเครื่อง

คุณใช้แอปไหน

ClaudeClaude CodeCursorVS CodeChatGPT

เลือกแอปด้านบน เราจำไว้ให้ ครั้งหน้าปุ่มจะขึ้นว่า “ติดตั้งลง …”

เปิด Claude Desktop → Settings → Developer → Edit Config แล้ววางค่านี้ในไฟล์ claude_desktop_config.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "ใส่ค่าของคุณ",
        "BRIDGE_PORT": "ใส่ค่าของคุณ",
        "BROWSER": "ใส่ค่าของคุณ",
        "HEADLESS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

พิมพ์คำสั่งนี้ใน Terminal

claude mcp add threejs-devtools --env DEV_PORT='ใส่ค่าของคุณ' --env BRIDGE_PORT='ใส่ค่าของคุณ' --env BROWSER='ใส่ค่าของคุณ' --env HEADLESS='ใส่ค่าของคุณ' --env CHROME_PATH='ใส่ค่าของคุณ' -- npx -y threejs-devtools-mcp

เติมค่าที่เว้นว่างไว้ก่อนรัน

เปิดใน Cursor

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .cursor/mcp.json ของโปรเจกต์ หรือ ~/.cursor/mcp.json

{
  "mcpServers": {
    "threejs-devtools": {
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "ใส่ค่าของคุณ",
        "BRIDGE_PORT": "ใส่ค่าของคุณ",
        "BROWSER": "ใส่ค่าของคุณ",
        "HEADLESS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

เบราว์เซอร์จะถามก่อนเปิดแอป จากนั้นแอปแสดงค่าตั้งให้ตรวจแล้วกดยืนยัน ช่อง key เว้นว่างไว้ให้คุณใส่เอง

เปิดใน VS Code

หรือคัดลอกค่าตั้งเอง

วางในไฟล์ .vscode/mcp.json ของโปรเจกต์

{
  "servers": {
    "threejs-devtools": {
      "type": "stdio",
      "command": "npx",
      "args": [
        "-y",
        "threejs-devtools-mcp"
      ],
      "env": {
        "DEV_PORT": "ใส่ค่าของคุณ",
        "BRIDGE_PORT": "ใส่ค่าของคุณ",
        "BROWSER": "ใส่ค่าของคุณ",
        "HEADLESS": "ใส่ค่าของคุณ",
        "CHROME_PATH": "ใส่ค่าของคุณ"
      }
    }
  }
}

ตัวนี้รันในเครื่องคุณ แต่ ChatGPT ต่อได้เฉพาะ server บนอินเทอร์เน็ต ลองเลือกแอปอื่น

ตัวเลือกเก็บในคุกกี้บนเครื่องนี้ ไม่ต้องมีบัญชี

ค่าที่ต้องใส่เอง

DEV_PORT env
Dev server port to proxy (auto-detected from package.json if not set)
BRIDGE_PORT env
Bridge proxy port (default: 9222)
BROWSER env
Set to 'none' to disable auto-opening browser
HEADLESS env
Set to 'true' for headless browser mode (CI)
CHROME_PATH env
Custom Chrome/Edge executable path

ค่าตั้งนี้สร้างจากข้อมูลใน registry ของผู้ทำ ถ้าไม่ตรงกับ README ให้เชื่อ README

ทำอะไรได้บ้าง

รันในเครื่องคุณ รายการเครื่องมือจะขึ้นในแอป AI หลังติดตั้ง

ผลตรวจเบื้องต้นi

เราตรวจจากข้อมูลที่ใครก็เปิดดูได้ ยังไม่ได้อ่านโค้ด ข้อที่ไม่เกี่ยวกับตัวนี้ไม่นับในตัวหาร · ตรวจเมื่อ 6 พ.ย. 2569

✓ ผ่าน
ตัวตนผู้ทำตรงกับ repo
ชื่อใน registry ยืนยันด้วยบัญชี GitHub DmitriyGolub ซึ่งเป็นเจ้าของ repo
… ยังไม่ตรวจ
ยังมีคนดูแล
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
… ยังไม่ตรวจ
มีสัญญาอนุญาต (license)
ยังไม่ได้อ่านข้อมูล repo จาก GitHub
– ไม่เกี่ยว
endpoint ตอบ
ตัวนี้รันบนเครื่องคุณ ไม่มี endpoint บนอินเทอร์เน็ต
– ไม่เกี่ยว
ล็อกอินแบบ OAuth
ตัวนี้รันบนเครื่อง ใช้ค่าที่ตั้งในเครื่องแทน
… ยังไม่ตรวจ
คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง
รันในเครื่องคุณ เราอ่านรายการเครื่องมือได้เฉพาะตัวที่มี endpoint บนอินเทอร์เน็ต

เทียบกับตัวอื่นในหมวด อื่น ๆi

ดาวมากกว่า 0% ของอีก 32410 ตัวในหมวดนี้
ส่งรุ่นใหม่เข้า registry ล่าสุดกว่า 4% ของอีก 32410 ตัวในหมวดนี้
ผลตรวจเบื้องต้นดีกว่าหรือเท่ากับ 100% ของอีก 32410 ตัวในหมวดนี้

เทียบกับทุก server ที่ยังใช้งานในหมวดนี้ทั้งทะเบียน ดาวนับเฉพาะเมื่อผู้ลงทะเบียนเป็นเจ้าของ repo

คำถามที่พบบ่อย

Three.js DevTools MCP ปลอดภัยไหม?

จากการตรวจเบื้องต้นของเรา ผ่าน 1 จาก 1 ข้อที่ตรวจได้ เรายังไม่ได้อ่านโค้ด ก่อนใส่กุญแจหรือ token ให้ดูว่า server ขอสิทธิ์อะไร และเลือกกุญแจที่ทำได้เท่าที่จำเป็น

ต้องใช้กุญแจหรือรหัสอะไรบ้าง?

registry ไม่ได้ระบุว่าต้องใช้กุญแจ แต่บางตัวจะขอให้ล็อกอินตอนใช้ครั้งแรก

ตัวนี้รันบนเครื่องหรือบนคลาวด์?

รันบนเครื่องของคุณ โปรแกรม AI จะเปิด server ขึ้นมาเองเมื่อใช้ ข้อมูลไม่ต้องผ่านเซิร์ฟเวอร์ของผู้ทำ (ยกเว้นตัวที่ไปเรียกบริการออนไลน์ต่อ)

ยังมีคนดูแลอยู่ไหม?

repo บน GitHub มีการแก้โค้ดล่าสุด – และส่งรุ่นล่าสุด (0.2.1) เข้า registry 8 เดือนที่ผ่านมา

ใช้กับโปรแกรมไหนได้บ้าง?

โปรแกรมที่รองรับ MCP เช่น Claude Desktop, Claude Code, Cursor และ VS Code ตัวนี้ต้องมี Node.js ในเครื่องด้วย

มีตัวไหนใช้แทนได้บ้าง?

ในหมวดเดียวกันมี Spec Driven Development, Remote Desktop Commander, debuff

ตัวที่ใช้แทนได้

server หมวดเดียวกันจากผู้ทำคนอื่น เรียงตามดาว

อ่านการ์ด:★ ดาว GitHubiสามเสา: รีวิว · ผลตรวจ · การใช้งานiอัปเดต = วันที่ส่งรุ่นล่าสุดเข้า registryi

Spec Driven Development

โดย formulahendry

MCP Server that facilitates spec-driven development workflows, not just Vibe Coding.

รันบนเครื่อง★ 440MITอัปเดต 14 เดือนที่ผ่านมา

ติดตั้ง

Remote Desktop Commander

โดย desktop-commander

Remote Desktop Commander: use files, terminal and processes on your own computers from any AI app.

รันบนคลาวด์★ 211อัปเดต เมื่อวาน

ติดตั้ง

debuff

โดย debuffjp

Let coding agents play, test and tune your 2D web game: live state, explained errors, replays, fuzz.

รันบนเครื่องอัปเดต วันนี้

ติดตั้ง

README จากผู้ทำ

เปิดอ่าน README

ส่วนนี้คัดจาก repo ของผู้ทำตามต้นฉบับ PopNx MCP ไม่ได้ตรวจหรือรับรองเนื้อหา ตัด HTML รูปภาพ และสคริปต์ออกแล้ว ลิงก์จะพาออกนอกเว็บ

threejs-devtools-mcp

MCP server for inspecting Three.js scenes in real time, trying changes live in the browser, and turning them into code. 69 tools cover objects, materials, shaders, textures, animation, performance and memory, plus website audits, video frame capture and Playwright helpers.

Zero changes to your project. Works with vanilla Three.js and React Three Fiber, on WebGLRenderer and WebGPURenderer.

Setup

1. Add the MCP server

Claude Code

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

Claude Desktop

Add to claude_desktop_config.json:

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

Cursor

Add to .cursor/mcp.json in your project:

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

Or use the HTTP transport — see Cursor setup guide.

Windsurf

Add to ~/.codeium/windsurf/mcp_config.json:

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

VS Code (Copilot)

Add to .vscode/mcp.json:

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

OpenCode

Add to opencode.json in your project:

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

2. Start your dev server and open the browser

Start your Three.js dev server as usual (npm run dev). The MCP server auto-detects the port from package.json and opens a browser at localhost:9222 with the devtools bridge injected.

Keep the browser tab open. The MCP server talks to your scene through a WebSocket bridge. Close the tab = tools stop working.

3. Ask the AI about your scene

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

Look now vs. change the code

Every tool is labelled, so you and the AI always know what touches your files:

	Tools	Your code
Inspect	`scene_tree`, `material_details`, `web_audit`, screenshots…	untouched
Live preview	`set_material_property`, `set_light`, `set_camera`…	untouched; lost on page reload
Debug visual	wireframe, bounding boxes, helpers, overlay	untouched; never needed in code
For code	`pending_changes`, `gltf_to_r3f`	the AI writes this into your source

Every live-preview change is recorded. pending_changes returns each one as before → after with ready-to-paste code (vanilla Three.js and React Three Fiber) and where to find it in your project. revert_changes undoes them in the browser.

For websites and videos

`web_audit`: checks for a blurry canvas (pixel ratio, missing resize), battery drain (rendering while idle or off-screen), heavy textures (oversized, not KTX2), expensive shadows, wrong color space and too many draw calls. Each finding comes with the fix.
`capture_frames`: records a frame sequence for promo clips and reels. Time is virtualised, so the output is perfectly smooth at 30/60 fps even if your scene renders slowly. You get the ffmpeg command for MP4/WebM.

Skills

Ready-made workflows show up as slash commands in Claude Code, Cursor and other clients: inspect-scene, try-look, apply-to-code, web-perf-audit, prepare-video, debug-invisible, playwright-setup.

Playwright & Puppeteer

Three ways to connect, same tools in all of them: your own browser (default), a Chrome launched by the server (HEADLESS / CDP_PORT, shareable with Playwright MCP), or your own tests:

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);

See Browsers, Puppeteer & Playwright.

In-browser overlay

A built-in devtools panel with live performance stats, interactive scene graph, material editor, and 3D object preview. Activated automatically or via the toggle_overlay tool.

Tip: name your objects

Unnamed objects show as (unnamed) in the scene tree. Named objects are easier to find and modify:

// Three.js

mesh.name = "player";

// React Three Fiber

Documentation

Tools reference — all 69 tools by mode, skills, parameters
Browsers, Puppeteer & Playwright — connection modes, e2e tests, CI tips
Advanced setup — animations, scene export, configuration, transports
Cursor setup — step-by-step guide for Cursor
Token-efficient workflow — best practices for saving context

License

MIT

Three.js DevTools MCP

ภาพรวม

สามเสาของ PopNx MCP

ใช้ทำอะไรได้

ติดตั้ง

ก่อนติดตั้ง

ค่าที่ต้องใส่เอง

ทำอะไรได้บ้าง

ผลตรวจเบื้องต้นi

ตัวตนผู้ทำตรงกับ repo

ยังมีคนดูแล

มีสัญญาอนุญาต (license)

endpoint ตอบ

ล็อกอินแบบ OAuth

คำอธิบายเครื่องมือไม่มีคำสั่งแอบแฝง

เทียบกับตัวอื่นในหมวด อื่น ๆi

คำถามที่พบบ่อย

ตัวที่ใช้แทนได้

Spec Driven Development

Remote Desktop Commander

debuff

README จากผู้ทำ

threejs-devtools-mcp

Setup

1. Add the MCP server

2. Start your dev server and open the browser

3. Ask the AI about your scene

Look now vs. change the code

For websites and videos

Skills

Playwright & Puppeteer

In-browser overlay

Tip: name your objects

Documentation

License