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

Question

我正在构建一个 Gatsby 站点，并希望使用 react-three-fiber 在其中渲染 3D 对象。我正在尝试将 Stats.js 添加到其中，只是为了监控(并了解它是如何工作的)，就像大多数普通的 three.js 项目一样。

• 我尝试使用 react-stats，但它似乎已经过时:最后更新于 5 年前。在我发现“与 React 16 不兼容”的问题中，即使它似乎已修复，但错误“需要导入 Proptypes”不断弹出。
• 我尝试使用 react-canvas-stats，在奋斗了几个小时之后，我无法克服来自 的 boss 错误“TypeError: target is not a constructor”在 node_modules/react-three-fiber/web.js:183 中创建实例。根据我的经验，我可能不应该弄乱 node_modules 中的任何文件。

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

无论如何，我们将不胜感激!

Answer 1

你可以自己制作，这个是用于原始 fps 的:https://codesandbox.io/s/r3f-gltf-useloader-pvriu平均 fps 稍微复杂一点，但没那么多。

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

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

编辑:

它在里面，您可以从“drei”导入 { Stats } 并将其粘贴到场景中。