Needle Tools GmbH

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

See inside any three.js scene — and make it yours. Needle Inspector turns your browser into a professional 3D development environment: scene hierarchy, live property editing, node graphs, shader code, memory profiling and AI assistance, on any webpage that uses three.js. WebGL and WebGPU. What it does: The extension automatically detects three.js on any webpage and hooks into the running scene — no code changes, no setup. You get immediate access to: * Visual Scene Hierarchy — Browse the entire 3D scene as an organized tree, like in Unity or Blender. Meshes, lights, cameras and every object at a glance. Search, filter, or hide inactive objects for a cleaner view. * Real-time Property Editing — Modify positions, rotations, materials, textures, lights and more, with full undo/redo — changes apply instantly to the live scene. Even values buried inside your GLB files. Export your edits as JSON or text and bring them back into your project. * Node Graphs & Render Graph — Explore any material as a node graph, including three.js TSL / node materials. Step from the scene into materials, subgraphs and functions to see how a shader is built. Capture a frame as a render graph: every render call, pass and target at a glance. * Code View — Read the code behind any selection: reconstructed TSL, compiled shaders and three.js source, one click away. * Resources & Memory — Every texture, geometry and material currently loaded, with memory estimates. See what's loaded, what it costs, and what never unloads — memory leaks have nowhere to hide. Pick any texture to inspect it, and open meshes in dedicated debug views (UV layouts, wireframe and more). * AI That Sees Your Scene — Chat with your scene right in the inspector, or connect Claude Code, Cursor & co. via MCP to inspect and edit it for you. Your AI can even pull the edits you made by hand and apply them to your source code. Run npx needle-cloud start to get started (learn more: https://needle.click/mcp). * Fully Flexible Layout — Arrange the inspector like your desktop editor: dock, float, stack and resize every panel, maximize what you're working in — or pop the whole UI out into its own window. Your layout sticks around. * Performance Monitoring — Real-time FPS and download size estimation to understand how a scene performs and what it costs to load. * Quick Search — Instantly find objects, materials or Needle Engine components across the whole project. * Asset Browser — Drag and drop materials and HDRI environments (delivered instantly via Needle Cloud) into the running scene for quick iteration and look development. * Needle Engine Support — Inspect, modify and debug Needle Engine components directly. Free and Pro Inspecting, debugging and learning from any website is free. Needle Inspector Pro unlocks working on your own projects and going deeper: live-editing on localhost, the full resource list, node-graph drill-down with full TSL and compiled shader output, MCP & AI editing, and taking your edits home. One-time purchase, no subscription — and it's already included with every Needle Engine Pro license. Getting started Install the extension, open any webpage built with three.js and click the Needle icon — the inspector detects the scene automatically and opens right on the page. No code changes, no npm package, no setup. It works on production websites and on your local dev server (localhost) alike. Works with your stack If it renders with three.js, the inspector can see it: plain three.js, React Three Fiber, Threlte, A-Frame and other frameworks built on top, with WebGL, WebGL2 and WebGPU renderers, glTF / GLB assets, TSL and node materials, custom shaders and post-processing pipelines. Private by design Everything runs locally in your browser. Your scenes, edits and code never leave your machine — nothing is uploaded unless you explicitly sign in and use cloud features like AI chat. Why you should install it If you're building, debugging or learning three.js, this extension eliminates blind development. Instead of console.log statements and endless page refreshes, you get immediate visual feedback, interactive control and real insight into any 3D scene — whether you're profiling draw calls, hunting a memory leak, reverse-engineering a shader or just moving a light. Perfect for three.js developers debugging rendering issues or hunting memory leaks, technical artists fine-tuning materials and lighting, students learning how real three.js websites are built — and anyone curious what's under the hood of 3D on the web. Learn more: https://needle.click/inspector