使用可视化层次结构、实时属性编辑、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
Needle Inspector — DevTools for three.js插件谷歌浏览器安装教程
第一步：下载Needle Inspector — DevTools for three.js安装扩展
第二步：下载下来的扩展解压到你想放的文件夹里
比如我解压到extend文件夹
打开Chrome的扩展页面（chrome：// extensions /或按Chrome菜单图标>更多工具>扩展程序），右上角开发者模式，点击开启，蓝色为开启，灰色为关闭；
再次将crx文件拖放到扩展程序，页面左下角提示：“扩展功能、应用和主题背景可能会损害您的计算机。您确定要继续吗？”
点击“继续”依然显示“无法从该网站添加应用、扩展程序和用户脚本”。尝试另一种办法方法。
第三步：把crx后缀改为zip，再进行解压
如果有些windows电脑系统查看不到文件扩展名，则可以通过以下设置：
找到文件夹顶部，点击查看
点击查看，找到隐藏已知文件扩展名，去掉前面的勾即可
这样你就能看到解压好的扩展名：.crx
解压的扩展名为.crx
把.crx改为：zip
然后再用解压工具再解压一遍，即可得到扩展的全部文件
然后再谷歌浏览器插件页面选择：加载已解压的扩展程序
这样就安装成功了
友情提醒：
其他浏览器，包括qq浏览器，360浏览器，edge浏览器，猎豹浏览器，搜狗浏览器安装插件的方法都是类似的，以上内容大部分通用！
