在 react-three-fiber 和 NextJS 中加载 bm-font答案

【问题标题】：Load bm-font in react-three-fiber and NextJS在 react-three-fiber 和 NextJS 中加载 bm-font
【发布时间】：2021-04-26 05:16:32
【问题描述】：

我正在尝试让位图字体在 NextJS 应用程序的 react-three-fiber 中工作，但我无法弄清楚如何让它工作。这是我正在尝试使用的包：https://github.com/Jam3/three-bmfont-text

如您所见，three-bmfont-text 和 load-bmfont 所需的包都使用 CommonJS require() 语法，老实说，这在使用 NextJS 时一直给我带来麻烦。我尝试在getServerSideProps 中使用它，因为它只在服务器上运行，但只在pages/ 文件夹中运行，我需要在全局画布组件中使用它。另外，我认为这不是正确的想法。

我还为 react-three-fiber 找到了一个三 bmfont 包，但是在尝试导入字体纹理的 PNG 文件时它引发了编码错误。我不知道如何解决这个问题，所以我认为这个包可能不是答案。

我确信有办法做到这一点，我为可能有点固执己见的问题道歉，但我已经走了几条路，导致我在如何实施这一点上无处可去，我被困住了。任何帮助将不胜感激。

【问题讨论】：

标签： reactjs three.js bitmap next.js react-three-fiber

【解决方案1】：

three-bmfont-text 需要一个全局 THREE 对象。你可以在next.config.js这样提供它：

config.plugins.push(
 new webpack.ProvidePlugin({
  THREE: 'three',
 })
)

【讨论】：