Needle Inspector — DevTools for three.js
Extension Actions
Inspect any three.js, react-three-fiber or Needle Engine project with a visual hierarchy, real-time property editing, MCP connection
Transform any webpage using three.js into a professional 3D development environment. The Needle Inspector provides powerful scene inspection, real-time editing, and AI-powered assistance—all directly in your browser.
What it does:
This extension automatically detects three.js projects on any webpage and provides professional-grade debugging tools. When you visit a site using three.js, the Needle Inspector hooks into the scene and gives you immediate access to:
* Visual Scene Hierarchy — Browse your entire 3D scene as an organized tree structure, just like you would in Unity or Blender. See meshes, lights, cameras, and all objects at a glance. Filter by search terms or hide inactive objects for a cleaner view.
* Real-time Property Editing — Modify object properties directly in the browser. Adjust positions, rotations, scale, materials, textures, and more—changes apply instantly to the live scene. Export your modifications as JSON or plain text to preserve your work.
* Performance Monitoring — Track FPS in real-time and view download size estimations to understand the performance characteristics of your 3D scenes.
* Advanced Inspector Tools — Inspect material properties with texture previews, use search filters to quickly find specific properties, and benefit from a streamlined UI that hides advanced options until needed.
* Integrated AI Support — Connect your local AI assistant (Claude, Cursor, etc.) via MCP server support. The AI can inspect your scene hierarchy, analyze properties, measure performance metrics, and provide intelligent assistance while you work. Just run npx needle-cloud start to get started. (Visit https://fwd.needle.tools/mcp to learn more)
* Experimental Features — Access the new Asset Browser with HDRi and material assets, open isolated 3D views for specific scene parts, or render the inspector UI in a separate window for maximum workspace flexibility.
Why you should install it
If you're developing, debugging, or learning three.js, this extension eliminates the frustration of blind development. Instead of writing console.log statements or repeatedly refreshing the page to test changes, you get immediate visual feedback, interactive control, and performance insights for your 3D scenes.
Perfect for
three.js developers debugging rendering issues or optimizing performance, designers fine-tuning 3D positions and material properties, students learning three.js who want to understand scene hierarchies, and anyone inspecting how three.js websites are built.
The Needle Inspector transforms your browser into a professional 3D development environment, making three.js development faster, easier, and more intuitive.
Learn more about Needle Inspector: https://engine.needle.tools/docs/three/needle-devtools-for-threejs-chrome-extension.html
Latest reviews
- Katja Rempel
- A very useful tool for debugging your own projects or understanding how others work!
- Den
- The best tool for inspecting and debugging Three.js apps. Special thanks for the MCP server — it’s a game changer for vibe coding (in a good way)!
- Thibaut Andrieu
- A must have for any threejs developer! Makes debugging much easier. Finally, threejs start to look like modern 3D Engines like Unity, Godot, Unreal, etc... - Ever wonder why you don't see your object ? Just have a look to camera coordinates. - Ever tried to write a test with a very specific point of view ? Just move your camera and copy/past camera transform to your test. - Ever wonder in which axis you should rotate your .fbx so it is not upside down when importing in threejs ? Just do it in live and report values to your code.
- pjos
- absolute gold dust, what a release
- Rodrigo Hamuy
- It is just soooo good, thanks for creating such an amazing dev tool!!
- KidsFab production
- A must have tool for pros, beginners, and everything in between !
- lu55by andros
- Amazing!
- Cosmic Crafter
- This is awesome. I can even see the different meshes I've separately named in Blender here just by hovering. One addition is maybe it could tell us how/where to optimize the scene (as it shows memory usage to be RED in color, but doesn't specify WHY) and also maybe show the website's overall size along with it as well. Nonetheless, This is such a great start for the extension. Thank you very much.
- Francesco Michelini
- This extension in 5 minutes helped me solving a visual issue I was struggling to fix for two weeks. A must have for all ThreeJS devs 🍻
- skywalker shen
- Awesome devtool for threejs, highly recommended. Yet there is an issue: I want to use threejs-devtool along with it, yet I notice with this tool enabled, the threejs-devtool reads nothing from the site. It will be appreciated that the tools are not exclusive.
- Alexander Dalbert
- I use it to document my three.js projects and create thumbnails. the ability to hide or move elements on the fly for screen captures is incredibly useful, and being able to quickly swap out textures makes experimenting much faster. The latest update added camera smoothing to the free-look mode (Before, my mouse control was a bit sluggish). Just flying around with the mouse and with wasd controls for my screen capture. As a designer rather than a developer, it makes everything less abstract and much more visual.
- Sebastien Lempens
- Simply the best Three.js extension I’ve ever tested. Bravo!
- Patrick Byrn
- Game changer when working with three.js. Feels like magic the first time you use it.
- Alexander Börner
- works like a charm. Thank you for your hard work Needle team!
- Felix Herbst
- Love it! Not only does this give access to the entire scene structure, it's very useful to see what's actually going on in a three.js or Needle scene. The "fly camera" is a great tool as well.
- Valentin
- This is a really good tool for inspecting any three.js scene. It’s extremely useful for quickly debugging your own projects, but it’s also great for analyzing and learning how other websites are structured without painfully digging through the default browser dev tools. It does everything the official three.js editor does—just better! If you’re a WebGL developer, it’s a must-have in your toolbox.