reactjs - 如何在 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.

这就是我在 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
});

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

Answer 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