如何使用 React-three-fiber 添加 Stats.js 到 Gatsby 站点？
How to add Stats.js to a Gatsby site using React-three-fiber?
我正在构建一个 Gatsby 站点并希望使用 react-three-fiber 在其中渲染 3D 对象。我正在尝试向其中添加 Stats.js，只是为了监视（并了解它是如何工作的），就像大多数普通的 three.js 项目一样。
- 我尝试使用
react-stats，但它似乎已过时：最后更新于 5 年前。在我发现的问题 "Not compatible with React 16" 中，尽管它似乎已修复，但错误 "Proptypes need to be imported" 不断弹出。
- 我尝试使用
react-canvas-stats，在战斗了几个小时后，我无法通过 node_modules/react-three-fiber/web.js:183 中来自 createInstance 的 Boss 错误 "TypeError: target is not a constructor"。根据我的经验，我可能不应该弄乱 node_modules. 中的任何文件
我不确定使用一个包是否是最好的主意（或者如果有更好的包我找不到），或者我是否应该尝试从原始 repo 添加 stats.js （完全不知道从哪里开始）。或者，如果首先添加 stats.js 毫无意义，我应该做一些完全不同的事情。或者如果有一个非常明显的解决方案我完全错过了！
无论如何，我们将不胜感激！
看看react-fps-stats。为我做了这份工作。
如果您只想将 fps 用于开发目的，您可以考虑使用内置的 Chrome Devtools FPS Meter。
您可以自己制作，这是针对原始 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 } 并将其粘贴到场景中。
我正在构建一个 Gatsby 站点并希望使用 react-three-fiber 在其中渲染 3D 对象。我正在尝试向其中添加 Stats.js，只是为了监视（并了解它是如何工作的），就像大多数普通的 three.js 项目一样。
- 我尝试使用
react-stats，但它似乎已过时：最后更新于 5 年前。在我发现的问题 "Not compatible with React 16" 中，尽管它似乎已修复，但错误 "Proptypes need to be imported" 不断弹出。 - 我尝试使用
react-canvas-stats，在战斗了几个小时后，我无法通过node_modules/react-three-fiber/web.js:183中来自createInstance的 Boss 错误 "TypeError: target is not a constructor"。根据我的经验，我可能不应该弄乱node_modules. 中的任何文件
我不确定使用一个包是否是最好的主意（或者如果有更好的包我找不到），或者我是否应该尝试从原始 repo 添加 stats.js （完全不知道从哪里开始）。或者，如果首先添加 stats.js 毫无意义，我应该做一些完全不同的事情。或者如果有一个非常明显的解决方案我完全错过了！
无论如何，我们将不胜感激！
看看react-fps-stats。为我做了这份工作。
如果您只想将 fps 用于开发目的，您可以考虑使用内置的 Chrome Devtools FPS Meter。
您可以自己制作，这是针对原始 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 } 并将其粘贴到场景中。