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

【问题标题】：How to load WebGL Vertex and Fragment Shaders in ReactJs?如何在 ReactJs 中加载 WebGL 顶点和片段着色器？
【发布时间】：2020-01-06 18:13:51
【问题描述】：

让我先提出我的问题，然后分享相关细节：有没有一种方法可以在 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.

这就是我在我的 react-app 代码中使用这些着色器的方式：

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
});

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

【问题讨论】：

您使用的是什么捆绑器？网络包？包裹？该捆绑器负责将require('textfile.frag') 变成正确的东西。它现在不知道如何处理 .frag 和 .vert 文件。
我正在使用基本的 react-app create-react-app

标签： reactjs webpack three.js glsl

【解决方案1】：

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

运行：

npm run eject

现在您需要配置 webpack 以允许将 frag 和 vert 文件作为字符串导入。这是通过webpack's '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 是在文件名上运行的正则表达式，因此这表示任何以.vert 或.frag 结尾的文件都应使用raw-loader

【讨论】：

我可能是错的，但我也怀疑您想在构建时而不是运行时调用 glslify。