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

jhkqcmku 于 2023-05-18 发布在 Webpack

关注(0)|答案(4)|浏览(197)

让我先提出我的问题，然后分享相关细节：是否有一种方法可以在ReactJS中使用/load（修复解析错误）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
});

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

webpack

来源：https://stackoverflow.com/questions/57778436/how-to-load-webgl-vertex-and-fragment-shaders-in-reactjs

4条答案

按热度按时间

vbkedwbf1#

我认为你已经超出了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。

赞(0）回复(0）举报 2023-05-18

5jvtdoz22#

react-three-fiber/drei是three.js的rawshadermaterial的轻量级 Package 器的最佳选择。以下是文档：
https://docs.pmnd.rs/drei/shaders/shader-material
文档非常简单，你仍然可以用glsify导入外部文件

赞(0）回复(0）举报 2023-05-18

fnatzsnv3#

如果什么都不起作用，请尝试将其作为字符串常量导入

const vertex = `
varying vec2 vertexUV;
varying vec3 vertexNormal;

void main(){
    vertexUV = uv;
    vertexNormal = normalize(normalMatrix * normal);
    gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}`;

export default vertex

赞(0）回复(0）举报 2023-05-18

ttisahbt4#

更新：

对于新的react版本（webpack > 5），我们必须使用asset/source。
无需安装npm/yarn

注意：该项目必须被弹出。查看更多详情https://webpack.js.org/guides/asset-modules/：

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

赞(0）回复(0）举报 2023-05-18

我来回答

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

4条答案

相关问题

热门标签

最新问答