Needle Inspector — DevTools for three.js

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.