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

Question

我正在构建一个Gatsby网站，并希望使用react-three-fiber在其中渲染3D对象。我正试图向其中添加Stats.js，就像大多数普通的three.js项目一样监视（并了解其工作原理）。

• 我尝试使用react-stats，但它似乎已过时：最近更新于5年前。在发现“与React 16不兼容”的问题中，即使它似乎已解决，仍然不断出现错误“需要导入Proptypes”。
• 我尝试使用react-canvas-stats，经过几个小时的战斗，我无法克服来自{{1}的createInstance的老板错误“ TypeError：目标不是构造函数” }。以我的经验，我可能不应该弄乱node_modules/react-three-fiber/web.js:183中的任何文件。

我不确定使用软件包是最好的主意（或者找不到更好的软件包），还是不确定应该尝试从原始存储库中添加node_modules（绝对）不知道从哪里开始）。或者，如果首先添加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'导入{统计}并将其粘贴到场景中。

Answer 2

看看react-fps-stats。为我做了工作。

如果仅出于开发目的而需要fps，则可以考虑使用内置的Chrome Devtools FPS Meter。