Needle Inspector — DevTools & MCP for three.js

Inspect any three.js, react-three-fiber or Needle Engine project with a hierarchy, editing, assets browser & built-in MCP connection

See inside your three.js scene. Find the bottleneck. Get the look right. Needle Inspector brings visual 3D debugging to Chrome: browse the scene, edit materials and lights, explore shaders, track memory and ask AI about what you see. Works with three.js scenes on production websites and local development servers, with WebGL and WebGPU support. Enable it on a site and inspect the running scene. No code changes or npm package required. ## Explore the scene - **Scene hierarchy and quick search.** Find meshes, lights, cameras, materials and Needle Engine components. Browse the scene as a tree, inspect nested properties and see how real projects are put together. - **Live editing with undo/redo.** Adjust transforms, materials, textures and lighting directly in the running scene, including values inside GLB assets. Export your edits as JSON or text to bring them back into your project. - **Materials and environments.** Try materials and HDRI environments from the Asset Browser to dial in the look of your scene. ## Find what makes it slow - **Performance timeline.** Track FPS, draw calls, triangles and memory over time. Spot long frames, large resource loads and slow interactions. Pro adds script attribution to help trace a slowdown to the code behind it. - **Resources and memory.** Inspect loaded textures, geometries and materials with memory estimates. Find oversized assets and watch for resources that stay loaded when you expect them to be released. Inspect textures up close and examine meshes with UV and wireframe views. ## Understand the rendering - **Node graphs.** Explore materials, including three.js TSL and node materials. Follow subgraphs and functions to understand how a shader is built. - **Render graph.** Capture a frame and inspect its render calls, passes and targets. - **Code view.** Read reconstructed TSL, compiled shaders and three.js source behind your selection. ## Give your AI the live scene Ask AI about an object or property directly from the inspector. Pin chat bubbles to the things you're investigating and keep the conversation beside the scene. Connect Claude Code, Cursor and other MCP clients to inspect and edit the running scene. Your coding agent can also read edits you made by hand and use them to update your source code. MCP setup: https://needle.click/mcp ## Make room for your workflow Dock, float, stack, resize and maximize panels, or move the inspector into its own window. Your layout is saved for next time. Works with plain three.js and frameworks built on it, including React Three Fiber, Threlte and A-Frame. Inspect glTF/GLB assets, TSL and node materials, custom shaders and post-processing. Needle Engine projects also get component inspection and editing. ## Free and Pro Inspecting, debugging and learning from websites is free. Needle Inspector Pro unlocks live editing on your local projects, the full resource list, deeper node-graph exploration with TSL and compiled shader output, advanced performance details, MCP and AI editing, and exporting your edits. One-time purchase. No subscription. Already included with every Needle Engine Pro license. ## Get started Install Needle Inspector, open a three.js website and click the extension icon to enable it for that site. The page reloads and the inspector opens when it detects the scene. ## Local inspection and online features Scene inspection and live editing run in your browser. AI chat and cloud features send the data needed for those features to online services. The extension also sends usage analytics and error reports. Explore Needle Inspector: https://needle.click/inspector