# Three.js DevTools MCP

Инспектирует сцены Three.js, меняет материалы на лету в браузере и переносит правки в код. Пригодится при отладке 3D-графики, шейдеров и анимаций через ассистента.

- MCP-сервер · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 126
- Автор: DmitriyGolub
- Лицензия: MIT · policy=link-only · показываем только описание, файл — у автора
- Исходник: https://github.com/DmitriyGolub/threejs-devtools-mcp
- Обновлён: 2026-10-14
- HTML: https://affpapa.org/nevibecode/mcp/threejs-devtools-mcp

## Что делает

Сервер связывает ИИ-агента с браузером через WebSocket на порту `localhost:9222`. Он распознаёт порты локального сервера из `package.json` и автоматически добавляет мост отладки на страницу. Поддерживаются чистый Three.js и React Three Fiber как на WebGLRenderer, так и на WebGPURenderer. Исходный код проекта менять не нужно: агент работает с живой сценой через 69 встроенных инструментов.

Все операции делятся на осмотр, живой предпросмотр в браузере и генерацию кода. Если цвет меша или интенсивность света настроены на лету, инструмент `pending_changes` выдаёт готовый фрагмент для вставки в проект. Для поиска узких мест предусмотрен `web_audit`: он находит размытый канвас, скрытый рендеринг при простое и лишние вызовы отрисовки.

Закрытие вкладки браузера сразу рвёт WebSocket-соединение и блокирует работу инструментов. Для покадровой записи плавных видеороликов через инструмент `capture_frames` в системе потребуется наличие утилиты `ffmpeg`.

## Требования
- Нужно: Node.js (команды через npx)
- Переменные окружения: `DEV_PORT`, `BRIDGE_PORT`, `BROWSER`, `HEADLESS`, `CHROME_PATH` — это ключи и токены: значения спроси у человека, в репозиторий и общие файлы не записывай.
- Работает с: Playwright

## Установка

### Claude Code (родная платформа)

**Командой платформы**
```bash
claude mcp add --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> --transport stdio threejs-devtools-mcp -- npx -y threejs-devtools-mcp
```
Вместо <…> подставьте свои значения

### Codex

**Командой платформы**
```bash
codex mcp add threejs-devtools-mcp --env DEV_PORT=<DEV_PORT> --env BRIDGE_PORT=<BRIDGE_PORT> --env BROWSER=<BROWSER> --env HEADLESS=<HEADLESS> --env CHROME_PATH=<CHROME_PATH> -- npx -y threejs-devtools-mcp
```
Вместо <…> подставьте свои значения

### Cursor

**Файл настроек**
Файл `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "threejs-devtools-mcp": {
            "command": "npx",
            "args": [
                "-y",
                "threejs-devtools-mcp"
            ],
            "env": {
                "DEV_PORT": "<DEV_PORT>",
                "BRIDGE_PORT": "<BRIDGE_PORT>",
                "BROWSER": "<BROWSER>",
                "HEADLESS": "<HEADLESS>",
                "CHROME_PATH": "<CHROME_PATH>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### GitHub Copilot

**Файл настроек**
Файл `.vscode/mcp.json`:
```json
{
    "servers": {
        "threejs-devtools-mcp": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "threejs-devtools-mcp"
            ],
            "env": {
                "DEV_PORT": "<DEV_PORT>",
                "BRIDGE_PORT": "<BRIDGE_PORT>",
                "BROWSER": "<BROWSER>",
                "HEADLESS": "<HEADLESS>",
                "CHROME_PATH": "<CHROME_PATH>"
            }
        }
    }
}
```
Вместо <…> подставьте свои значения

### Gemini CLI

**Командой платформы**
```bash
gemini mcp add -e DEV_PORT=<DEV_PORT> -e BRIDGE_PORT=<BRIDGE_PORT> -e BROWSER=<BROWSER> -e HEADLESS=<HEADLESS> -e CHROME_PATH=<CHROME_PATH> threejs-devtools-mcp npx -y threejs-devtools-mcp
```
Вместо <…> подставьте свои значения

## Когда брать
- найти скрытые или неправильно позиционированные меши в иерархии сцены
- протестировать параметры материалов и источников света прямо в браузере
- перенести утверждённые настройки 3D-объектов в код React Three Fiber
- выявить лишние вызовы отрисовки и тяжелые текстуры через инструмент `web_audit`
- записать покадровую анимацию для видеоролика с фиксированным фреймрейтом

## Примеры запросов агенту
- Покажи дерево сцены и объясни, почему модель машины не отображается
- Попробуй изменить цвет кузова на тёмно-синий и покажи результат в браузере
- Запусти аудит производительности сцены и перенеси готовые правки материалов в код

## Похожие
- [Front-End Checklist](https://affpapa.org/nevibecode/mcp/front-end-checklist.md) — MCP-сервер · ★ 74559
- [tldraw](https://affpapa.org/nevibecode/mcp/tldraw.md) — MCP-сервер · ★ 51091
- [Figma-Context-MCP](https://affpapa.org/nevibecode/mcp/figma-context-mcp.md) — MCP-сервер · ★ 16062
- [mcp-server-chart](https://affpapa.org/nevibecode/mcp/mcp-server-chart.md) — MCP-сервер · ★ 4402
- [Dembrandt](https://affpapa.org/nevibecode/mcp/dembrandt.md) — MCP-сервер · ★ 3821
- [RevoGrid DataGrid MCP Pro](https://affpapa.org/nevibecode/mcp/revogrid-datagrid-mcp-pro.md) — MCP-сервер · ★ 3450

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md