Three.js DevTools MCP — MCP-сервер для Claude Code: обзор
Инспектирует сцены Three.js, меняет материалы на лету в браузере и переносит правки в код. Пригодится при отладке 3D-графики, шейдеров и анимаций через ассистента.
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Что делает Three.js DevTools MCP
Сервер связывает ИИ-агента с браузером через WebSocket на порту localhost:9222. Он распознаёт порты локального сервера из package.json и автоматически добавляет мост отладки на страницу. Поддерживаются чистый Three.js и React Three Fiber как на WebGLRenderer, так и на WebGPURenderer. Исходный код проекта менять не нужно: агент работает с живой сценой через 69 встроенных инструментов.
Все операции делятся на осмотр, живой предпросмотр в браузере и генерацию кода. Если цвет меша или интенсивность света настроены на лету, инструмент pending_changes выдаёт готовый фрагмент для вставки в проект. Для поиска узких мест предусмотрен web_audit: он находит размытый канвас, скрытый рендеринг при простое и лишние вызовы отрисовки.
Закрытие вкладки браузера сразу рвёт WebSocket-соединение и блокирует работу инструментов. Для покадровой записи плавных видеороликов через инструмент capture_frames в системе потребуется наличие утилиты ffmpeg.
Какие задачи решает
- найти скрытые или неправильно позиционированные меши в иерархии сцены
- протестировать параметры материалов и источников света прямо в браузере
- перенести утверждённые настройки 3D-объектов в код React Three Fiber
- выявить лишние вызовы отрисовки и тяжелые текстуры через инструмент
web_audit - записать покадровую анимацию для видеоролика с фиксированным фреймрейтом
Примеры запросов агенту
- Покажи дерево сцены и объясни, почему модель машины не отображается
- Попробуй изменить цвет кузова на тёмно-синий и покажи результат в браузере
- Запусти аудит производительности сцены и перенеси готовые правки материалов в код
Как установить Three.js DevTools MCP
Командой платформы
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 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Вместо <…> подставьте свои значения
Файл настроек
{
"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>"
}
}
}
}Вместо <…> подставьте свои значения
Файл настроек
{
"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 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Вместо <…> подставьте свои значения
По шагам, с командами для каждой платформы: Как подключить MCP-сервер: Claude Code, Codex, Cursor, VS Code, Gemini CLI и другие
Вопросы о Three.js DevTools MCP
Как установить Three.js DevTools MCP в Claude Code?
Выполните команду claude mcp add threejs-devtools -- npx -y threejs-devtools-mcp в терминале.
Что делает Three.js DevTools MCP?
Сервер подключает ИИ-ассистента к запущенной в браузере 3D-сцене через WebSocket. Это позволяет в реальном времени проверять параметры объектов, пробовать правки без перезагрузки и сохранять результат в исходники.
Нужно ли внедрять сторонний код в проект для работы сервера?
Нет, инструмент работает без модификации кодовой базы Three.js или React Three Fiber. Достаточно запустить стандартный сервер разработки и оставить открытой вкладку браузера.
