如何使用 React-three-fiber 将 Stats.js 添加到 Gatsby 站点？

Question

我正在构建一个 Gatsby 站点并希望使用react-three-fiber. 我正在尝试向其中添加 Stats.js，只是为了监视（并了解它是如何工作的），就像大多数普通的 Three.js 项目一样。

• 我尝试使用react-stats，但它似乎已经过时：上次更新是 5 年前。在我发现“与 React 16 不兼容”的问题中，即使它似乎已修复，“需要导入 Proptypes”错误不断弹出。
• 我试着用react-canvas-stats，并争夺几个小时后，我不能让过去的老板错误“类型错误：目标不是构造函数”来自何处createInstance在node_modules/react-three-fiber/web.js:183。根据我的经验，我可能不应该弄乱node_modules.

我不确定使用包是否是最好的主意（或者如果我找不到更好的包），或者我是否应该尝试stats.js从原始存储库中添加（完全不知道从哪里开始） . 或者，如果首先添加毫无意义stats.js，我应该做一些完全不同的事情。或者，如果有一个非常明显的解决方案，我完全错过了！

无论如何，感谢所有答案！

Answer 1

您可以自己制作，这是用于原始 fps：https : //codesandbox.io/s/r3f-gltf-useloader-pvriu平均 fps 涉及更多，但没有那么多。

如果你喜欢https://codesandbox.io/s/r3f-gltf-useloader-29sp2，你也可以使用普通的 Threejs 统计数据

我今天将这个添加到 drei：https : //github.com/react-spring/drei

编辑：

它在，你可以从 'drei' 导入 { Stats } 并将其粘贴到场景中。