使用层次结构、编辑、资产浏览器和内置 MCP 连接检查任何 Three.js、React-Three-Fiber 或 Needle Engine 项目
查看您的 Three.js 场景内部。找到瓶颈。让外观正确。
Needle Inspector 为 Chrome 带来了可视化 3D 调试：浏览场景、编辑材质和灯光、探索着色器、跟踪内存并向 AI 询问您所看到的内容。可与生产网站和本地开发服务器上的 Three.js 场景配合使用，并支持 WebGL 和 WebGPU。
在站点上启用它并检查运行场景。无需更改代码或 npm 包。
探索场景
场景层次结构和快速搜索。查找网格、灯光、相机、材质和 Needle Engine 组件。以树的形式浏览场景，检查嵌套属性并查看实际项目是如何组合在一起的。
具有撤消/重做功能的实时编辑。直接在运行场景中调整变换、材质、纹理和照明，包括 GLB 资源内的值。将您的编辑导出为 JSON 或文本，以便将它们带回到您的项目中。
材料和环境。尝试资产浏览器中的材质和 HDRI 环境来调整场景的外观。
找出导致速度变慢的原因
绩效时间表。随着时间的推移跟踪 FPS、绘制调用、三角形和内存。发现长帧、大量资源负载和缓慢交互。 Pro 添加了脚本归因，以帮助追踪其背后的代码的减速情况。
资源和内存。通过内存估计检查加载的纹理、几何形状和材质。查找超大资源，并在您希望释放资源时观察仍处于加载状态的资源。近距离检查纹理并使用 UV 和线框视图检查网格。
了解渲染
节点图。探索材料，包括 Three.js TSL 和节点材料。按照子图和函数来了解着色器是如何构建的。
渲染图。捕获帧并检查其渲染调用、通道和目标。
代码视图。阅读您选择背后的重建 TSL、编译着色器和 Three.js 源代码。
为您的 AI 提供现场场景
直接向检查员询问有关物体或财产的人工智能。将聊天气泡固定在您正在调查的事物上，并将对话保留在场景旁边。
连接Claude Code、Cursor和其他MCP客户端来检查和编辑正在运行的场景。您的编码代理还可以读取您手动所做的编辑并使用它们来更新您的源代码。
MCP 设置：https://needle.click/mcp
为您的工作流程腾出空间
停靠、浮动、堆叠、调整大小和最大化面板，或将检查器移至其自己的窗口中。您的布局将被保存以供下次使用。
可与普通的 Three.js 和基于其构建的框架配合使用，包括 React Three Fiber、Threlte 和 A-Frame。检查 glTF/GLB 资源、TSL 和节点材质、自定义着色器和后处理。 Needle Engine 项目还可以进行组件检查和编辑。
免费和专业版
检查、调试和从网站学习都是免费的。
Needle Inspector Pro 可解锁本地项目的实时编辑、完整的资源列表、使用 TSL 和编译的着色器输出进行更深入的节点图探索、高级性能细节、MCP 和 AI 编辑以及导出编辑。
一次性购买。没有订阅。已包含在每个 Needle Engine Pro 许可证中。
开始使用
安装 Needle Inspector，打开 Three.js 网站，然后单击扩展图标以在该网站启用它。当检测到场景时，页面将重新加载并打开检查器。
本地检查和在线功能
场景检查和实时编辑在浏览器中运行。人工智能聊天和云功能将这些功能所需的数据发送到在线服务。该扩展程序还发送使用情况分析和错误报告。
探索 Needle Inspector：https://needle.click/inspector