Needle Inspector – Inspect any Three.js project [video]

We're excited to introducing the Needle Inspector for any three.js project!

Explore any three.js, react-three-fiber, threlte, A-Frame, Spline or Needle Engine project with a visual hierarchy and real-time property editing. Bring powerful scene inspection and debugging capabilities directly to any webpage using three.js.

The Needle Inspector is free to use use and is a great tool for debugging or learning!

What it does:

The Needle Inspector 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 the 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.

* Real-time Property Editing — Modify object properties directly in the browser. Adjust positions, rotations, scale, visibility, and more—changes apply instantly to the live scene.

* Automatic Detection — No setup required. The extension automatically finds three.js scenes on any page and is ready to use immediately.

* Integrated AI Support — Chat with an AI assistant that understands your 3D scene. Ask questions about your project, get performance insights, or request scene analysis. The AI can use specialized tools to inspect scene hierarchy, measure performance metrics, analyze properties, and even capture screenshots—providing intelligent, context-aware assistance while you work.

--

We'd love to hear your throughts and feedback!