如何在ReactJ中加载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.

，这就是我如何在我的react应用程序代码中使用那些着色器：

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

我认为你已经超出了创建-反应-应用程序为你设置的范围。这意味着是时候弹出你的应用程序，并定制它的构建过程了。

运行：

npm run eject

现在，您需要配置webpack，允许以字符串的形式导入frag和vert文件。这是用webpack的“生料装载机”完成的

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

Answer 2

更新:随着新的反应版本( webpack > 5)，我们必须使用资产/源。不需要安装npm/纱线

{
  test: /\.(glsl|vert|frag)$/,
  type: 'asset/source',
},

Answer 3

反应-三纤维/德瑞是你最好的选择，为three.js的原材料的轻量级包装。以下是文件：

https://docs.pmnd.rs/drei/shaders/shader-material

文档非常直接，您仍然可以使用glsify导入外部文件。