如何在 ReactJs 中加载 WebGL 顶点和片段着色器？

Question

让我先提出我的问题，然后分享相关细节：有没有一种方法我们可以在ReactJS中使用/加载（修复解析错误）WebGL着色器？有可用的装载机吗？

经过几个小时的努力，在谷歌上搜索了一种能够使用着色器文件（即顶点和片段着色器）的方法，我还没有找到决定性的解决方案。

当我在 ReactJS 应用程序中执行此操作时：

• require('../shaders/particle.vert')
• import particleVert from '../shaders/particle.vert'

我收到此错误：

ERROR in ./src/particles/src/shaders/particle.vert 3:10
Module parse failed: Unexpected token (3:10)
You may need an appropriate loader to handle this file type.

这就是我在反应应用程序代码中使用这些着色器的方式：

const material = new THREE.RawShaderMaterial({
        uniforms,
        vertexShader: glslify(require('../shaders/particle.vert')),
        fragmentShader: glslify(require('../shaders/particle.frag')),
        // vertexShader: glslify(particleVert),
        // fragmentShader: glslify(particleFrag),
        depthTest: false,
        transparent: true,
        // blending: THREE.AdditiveBlending
});

---

这是显示问题完整日志的屏幕截图：

Answer 1

我认为您超出了 create-react-app 为您设置的界限。这意味着是时候弹出您的应用程序并自定义其构建过程了。

跑步：

npm run eject

现在您需要配置 webpack 以允许将 frag 和 vert 文件作为字符串导入。这是通过webpack 的“raw-loader”完成的

npm install raw-loader --save-dev

现在，将一些配置行添加到根目录中应有的 webpack.config.js 文件中。您正在寻找它定义的位置module: { rules: { /*...*/ } }。将以下规则添加到数组中：

// Require .vert and .frag as raw text.
{
  test: /\.(vert|frag)$/i,
  use: 'raw-loader',
}

这test是一个在文件名上运行的正则表达式，所以这表示任何以.vertor结尾的文件.frag都应该使用raw-loader