threejs-devtools-mcp
Агент смотрит живую сцену Three.js, примеряет правки материалов и света в браузере и переносит принятые в исходный код.
- 130 ★ репозитория
- Последний коммит
- MIT
Расширенный доступ
Почему такой уровень
- Открывает браузер с мостом и управляет страницей проекта на localhost.
- Переносит принятые правки в исходный код, поэтому изменения в файлах проверяйте по diff.
Установка
- Работает в
В терминале, через SkillFoxx CLI
npx skillfoxx add mcp/threejs-devtools-mcpОпределит агенты на машине, покажет уровень доступа и зафиксирует версию.
Другие способы установки
Доступ и проверки
Как мы проверяемРасширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.
- Открывает браузер с мостом и управляет страницей проекта на localhost.
- Переносит принятые правки в исходный код, поэтому изменения в файлах проверяйте по diff.
Это чужой код. Посмотрите файлы в репозитории перед установкой.
Что делает
MCP-сервер из 69 инструментов подключается к вашей работающей Three.js-сцене через мост на WebSocket. Менять проект для этого не нужно. Он понимает чистый Three.js и React Three Fiber, а также WebGLRenderer и WebGPURenderer. Инструменты разделены по тому, что они делают с кодом. Просмотр (`scene_tree`, `material_details`, скриншоты) ничего не трогает. Живая примерка (`set_material_property`, `set_light`, `set_camera`) меняет только открытую страницу и пропадает после перезагрузки. Команда `pending_changes` собирает все примерки в пары «было и стало» с готовым кодом для обоих вариантов, а `revert_changes` откатывает их в браузере. Отдельно есть `web_audit` для проверки размытого холста, лишних перерисовок, тяжелых текстур, дорогих теней и числа draw calls, и `capture_frames` для покадровой записи роликов с командой `ffmpeg`.
Для кого. Фронтендерам и 3D-разработчикам на Three.js, которые подбирают материалы, свет и камеру вместе с агентом и не хотят гонять правку через код после каждой попытки.
Подходит, если
- Модель на сцене не видна, и надо понять, где потерялась: в камере, материале или масштабе.
- Материал машины хочется примерить в красном и оставить только понравившийся вариант.
- Перед релизом сайта с WebGL проверяют нагрузку: размер текстур, тени, число draw calls.
- Для промо-ролика нужна покадровая запись сцены на 30 или 60 кадров в секунду.
- Загруженную glTF-модель переводят в компонент React Three Fiber через `gltf_to_r3f`.
Не подходит, если
- Сцена не на Three.js: сервер работает только с его объектами.
- Нужна генерация 3D-модели по тексту или фото, а не отладка готовой сцены.
- Вкладку с проектом нельзя держать открытой, а мост работает только пока она жива.
Пример запроса к агенту
Покажи дерево сцены, объясни, почему модель машины не видна, и попробуй сделать кузов красным без сохранения.MCP
- Транспорт
- stdio, http
- Авторизация
- не нужна
Переменные окружения
HEADLESS- Запуск Chrome без окна для режима, где браузер открывает сам сервер.
CDP_PORT- Порт отладки Chrome, чтобы делить браузер с Playwright MCP.
Ограничения
Вкладка браузера с проектом должна оставаться открытой: если закрыть ее, инструменты перестают отвечать. Dev-сервер вы запускаете сами, а порт сервер определяет по `package.json` и открывает страницу с мостом на `localhost:9222`. Безымянные объекты показываются как `(unnamed)`, поэтому в коде полезно задать `mesh.name`. Живые правки пропадают после перезагрузки страницы, пока вы не попросите перенести их в код. Версия пакета на момент проверки 0.5.0, поэтому интерфейс инструментов может меняться. Проект ведет один автор.
Как отключить. Выполните `claude mcp remove threejs-devtools-mcp` или удалите запись из конфигурации клиента, затем закройте вкладку с мостом.
Частые вопросы
Как поставить threejs-devtools-mcp в Claude Code?
Выполните `claude mcp add threejs-devtools-mcp -- npx threejs-devtools-mcp`, запустите dev-сервер проекта и оставьте открытой вкладку на `localhost:9222`.
Что делать, если инструменты перестали отвечать?
Скорее всего закрыта вкладка с мостом. Откройте страницу проекта снова и дождитесь подключения: связь с экраном идет через WebSocket.
Как правки попадают в исходный код?
После живой примерки агент вызывает `pending_changes` и получает пары «было и стало» с готовым кодом, затем вносит выбранные в файлы. Фраза «keep it» в запросе тоже запускает этот перенос.
Работает ли сервер с Playwright?
Да. Подключиться можно к своему браузеру, к Chrome, который запускает сервер (`HEADLESS`, `CDP_PORT`), или из тестов через `threejs-devtools-mcp/playwright`.
Какие агенты поддерживаются?
В README есть настройка для Claude Code, Claude Desktop, Cursor, Windsurf, VS Code с Copilot и OpenCode. Для Cursor описан и HTTP-транспорт.
Обсуждение
Вопросов и отзывов пока нет.
Похожие
MCP-серверыПодключает агента к запущенному dev-серверу Next.js 16+: ошибки, маршруты, логи и путь к документации нужной версии
Консоль, сеть, скриншоты и аудиты Lighthouse из вашего открытого Chrome прямо в агент через расширение DevTools
MCP-сервер и расширение Chrome: выбираете элемент DOM в браузере по Option+клику, агент видит его текст, стили и селектор
Три скилла для веб-3D: шейдеры GLSL, сцены Three.js с React Three Fiber и частицы на видеокарте.
Десять справочных скиллов по Three.js: сцена, геометрия, материалы, свет, шейдеры, анимация и постобработка
CLI, который дает агенту смотреть работающее приложение на React: дерево компонентов, props, state, hooks и профилирование рендеров
Сравнение с похожими
Карточки с тем же главным запросом: чем они отличаются.
| Инструмент | Официальный | Авторизация | Звезды репозитория | Главное отличие |
|---|---|---|---|---|
| threejs-devtools-mcp (эта карточка) | нет | не нужна | 130 | |
| three.ws 3D Studio MCP | нет | OAuth | 276 | создает 3D-модели по тексту и фото; здесь инструменты работают с уже открытой сценой Three.js |
| Three.js Skills | нет | 4 143 | дает агенту справочные инструкции по Three.js; здесь агент управляет живой сценой через MCP |
Коротко о README
Установка идет в два шага: добавить MCP в клиент, затем запустить dev-сервер и открыть браузер с мостом. Инструменты помечены по влиянию на код, поэтому видно, что только смотрит, что примеряет и что пишет в проект. Готовые сценарии доступны слэш-командами: `inspect-scene`, `try-look`, `apply-to-code`, `web-perf-audit`, `prepare-video`, `debug-invisible`, `playwright-setup`.