Needle Inspector — DevTools for three.js

使用可视化层次结构、实时属性编辑、MCP 连接检查任何 Three.js、React-Three-Fiber 或 Needle Engine 项目

使用 Three.js 将任何网页转变为专业的 3D 开发环境。 Needle Inspector 提供强大的场景检查、实时编辑和人工智能支持的帮助——所有这些都直接在您的浏览器中进行。

它的作用：
该扩展程序会自动检测任何网页上的三个.js 项目，并提供专业级的调试工具。当您使用 Three.js 访问网站时，Needle Inspector 会挂接到场景中并让您立即访问：

* 视觉场景层次结构 - 以有组织的树结构形式浏览整个 3D 场景，就像在 Unity 或 Blender 中一样。一目了然地查看网格、灯光、相机和所有对象。按搜索词过滤或隐藏非活动对象以获得更清晰的视图。

* 实时属性编辑——直接在浏览器中修改对象属性。调整位置、旋转、比例、材质、纹理等——更改会立即应用于实时场景。将您的修改导出为 JSON 或纯文本以保留您的工作。

* 性能监控 — 实时跟踪 FPS 并查看下载大小估计，以了解 3D 场景的性能特征。

* 高级检查器工具 - 通过纹理预览检查材质属性，使用搜索过滤器快速查找特定属性，并受益于在需要时隐藏高级选项的简化 UI。

* 集成 AI 支持 — 通过 MCP 服务器支持连接您本地的 AI 助手（Claude、Cursor 等）。 AI 可以检查您的场景层次结构、分析属性、测量性能指标并在您工作时提供智能帮助。只需运行 npx Needle-cloud start 即可开始。 （访问 https://fwd.needle.tools/mcp 了解更多）

* 实验性功能 — 访问包含 HDRi 和材质资源的新资源浏览器，打开特定场景部分的独立 3D 视图，或在单独的窗口中渲染检查器 UI，以实现最大的工作空间灵活性。

为什么你应该安装它
如果您正在开发、调试或学习 Three.js，此扩展可以消除盲目开发的挫败感。您无需编写 console.log 语句或重复刷新页面来测试更改，而是可以获得 3D 场景的即时视觉反馈、交互式控制和性能见解。

非常适合
Three.js 开发人员调试渲染问题或优化性能、设计师微调 3D 位置和材质属性、学习 Three.js 想要了解场景层次结构的学生以及检查 Three.js 网站构建方式的任何人。

Needle Inspector 将您的浏览器转变为专业的 3D 开发环境，使 Three.js 开发更快、更容易、更直观。

了解有关 Needle Inspector 的更多信息：https://engine.needle.tools/docs/ Three/needle-devtools-for- Threejs-chrome-extension.html