使用层次结构、编辑、资产浏览器和内置 MCP 连接检查任何 Three.js、React-Three-Fiber 或 Needle Engine 项目
查看任何 Three.js 场景的内部 - 并将其变成您的。 Needle Inspector 将您的浏览器转变为专业的 3D 开发环境：在任何使用 Three.js 的网页上提供场景层次结构、实时属性编辑、节点图、着色器代码、内存分析和 AI 辅助。 WebGL 和 WebGPU。
它的作用：
该扩展程序会自动检测任何网页上的 Three.js 并挂钩到正在运行的场景 - 无需更改代码，无需设置。您可以立即访问：
* 视觉场景层次结构 - 以有组织的树形式浏览整个 3D 场景，就像在 Unity 或 Blender 中一样。网格、灯光、相机和每个物体一目了然。搜索、过滤或隐藏非活动对象以获得更清晰的视图。
* 实时属性编辑 - 修改位置、旋转、材质、纹理、灯光等，并具有完全撤消/重做功能 - 更改立即应用于实时场景。甚至隐藏在 GLB 文件中的值。将您的编辑导出为 JSON 或文本并将其带回到您的项目中。
* 节点图和渲染图 — 探索任何材质作为节点图，包括 Three.js TSL/节点材质。从场景进入材质、子图和函数，了解着色器是如何构建的。捕获帧作为渲染图：每个渲染调用、通道和目标一目了然。
* 代码视图 — 阅读任何选择背后的代码：重建的 TSL、编译的着色器和 Three.js 源，一键点击即可。
* 资源和内存——当前加载的每个纹理、几何体和材质，以及内存估计。查看已加载的内容、成本以及从未卸载的内容 — 内存泄漏无处可藏。选择任何纹理进行检查，并在专用调试视图（UV 布局、线框等）中打开网格。
* 人工智能可以看到您的场景 - 直接在检查器中与您的场景聊天，或连接 Claude Code、Cursor 等。通过 MCP 为您检查和编辑它。您的人工智能甚至可以提取您手动所做的编辑并将其应用到您的源代码中。运行 npx Needle-cloud start 开始（了解更多信息：https://needle.click/mcp）。
* 完全灵活的布局 - 像桌面编辑器一样安排检查器：停靠、浮动、堆叠和调整每个面板的大小，最大化您正在使用的内容 - 或将整个 UI 弹出到自己的窗口中。您的布局会保留下来。
* 性能监控 - 实时 FPS 和下载大小估计，以了解场景的执行情况以及加载成本。
* 快速搜索 — 即时查找整个项目中的对象、材料或针引擎组件。
* 资产浏览器 — 将材质和 HDRI 环境（通过 Needle Cloud 立即交付）拖放到正在运行的场景中，以进行快速迭代和外观开发。
* Needle Engine 支持 — 直接检查、修改和调试 Needle Engine 组件。
免费和专业版
从任何网站进行检查、调试和学习都是免费的。 Needle Inspector Pro 可解锁您自己的项目并进行更深入的工作：在本地主机上进行实时编辑、完整的资源列表、使用完整的 TSL 和编译的着色器输出进行节点图钻取、MCP 和 AI 编辑以及将编辑带回家。一次性购买，无需订阅 - 它已包含在每个 Needle Engine Pro 许可证中。
入门
安装扩展程序，打开使用 Three.js 构建的任何网页，然后单击 Needle 图标 - 检查器会自动检测场景并直接在页面上打开。没有代码更改，没有 npm 包，没有设置。它适用于生产网站和本地开发服务器（本地主机）。
与您的堆栈配合使用
如果它使用 Three.js 渲染，检查员可以看到它：普通的 Three.js、React Three Fiber、Threlte、A-Frame 和其他构建在顶部的框架，以及 WebGL、WebGL2 和 WebGPU 渲染器、glTF / GLB 资源、TSL 和节点材质、自定义着色器和后处理管道。
私人设计
一切都在您的浏览器本地运行。您的场景、编辑和代码永远不会离开您的机器 - 除非您明确登录并使用人工智能聊天等云功能，否则不会上传任何内容。
为什么你应该安装它
如果您正在构建、调试或学习 Three.js，此扩展可以消除盲目开发。您可以获得即时视觉反馈、交互式控制和对任何 3D 场景的真正洞察，而不是 console.log 语句和无休止的页面刷新 - 无论您是在分析绘制调用、寻找内存泄漏、对着色器进行逆向工程还是只是移动灯光。
非常适合
Three.js 开发人员调试渲染问题或寻找内存泄漏，技术美工人员微调材质和照明，学生学习如何构建真正的 Three.js 网站 - 以及任何好奇 Web 3D 背后的内容的人。
了解更多：https://needle.click/inspector