threejs-devtools-mcp

What problem does it solve?

It eliminates the guesswork of debugging and optimizing Three.js scenes by letting you inspect the live scene graph, materials, shaders, and performance signals from an AI agent.

Core Features & Use Cases

• Scene inspection: Explore the full scene hierarchy, list cameras and lights, and locate objects by name/type/material.
• Material & shader editing: Update material properties (e.g., color, metalness, roughness, opacity) and modify vertex/fragment shader code and uniforms.
• Performance monitoring & debugging: Track FPS, frame time, draw calls, memory usage, and run common-issue checks for invisible objects or misconfigurations.
• Animation & code generation: Control animations and generate React Three Fiber components or export scene representations.

Quick Start

Start your app so the dev server runs, then ask your AI to use the tool to get the scene tree for your live Three.js page.