glsify-error '你可能需要一个适当的加载器来处理这种文件类型'?[英] glsify - error 'You may need an appropriate loader to handle this file type'?

本文是小编为大家收集整理的关于glsify-error '你可能需要一个适当的加载器来处理这种文件类型'?的处理/解决方法,可以参考本文帮助大家快速定位并解决问题,中文翻译不准确的可切换到English标签页查看源文。

问题描述

OK IM关注 https://tympanus .我引入了.frag和.vert文件(包含在链接中),并复制了他的设置方式.当我运行时,我会得到错误

模块解析失败:意外令牌(3:10)您可能需要一个 适当的加载程序来处理此文件类型.

在这里:

  const material = new THREE.RawShaderMaterial({ 
    uniforms,
    vertexShader: glslify(require('./vendor/shaders/particle.vert')), //HERE!!!!
    fragmentShader: glslify(require('./vendor/shaders/particle.frag')),
    depthTest: false, //change later?
    transparent: true,
    // blending: THREE.AdditiveBlending
  });

  const geometry = new THREE.InstancedBufferGeometry();

// positions
const positions = new THREE.BufferAttribute(new Float32Array(4 * 3), 3);
positions.setXYZ(0, -0.5, 0.5, 0.0);
positions.setXYZ(1, 0.5, 0.5, 0.0);
positions.setXYZ(2, -0.5, -0.5, 0.0);
positions.setXYZ(3, 0.5, -0.5, 0.0);
geometry.addAttribute('position', positions);

// uvs
const uvs = new THREE.BufferAttribute(new Float32Array(4 * 2), 2);
uvs.setXYZ(0, 0.0, 0.0);
uvs.setXYZ(1, 1.0, 0.0);
uvs.setXYZ(2, 0.0, 1.0);
uvs.setXYZ(3, 1.0, 1.0);
geometry.addAttribute('uv', uvs);

// index
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array([ 0, 2, 1, 2, 3, 1 ]), 1));

this.object3D = new THREE.Mesh(geometry, material);
this.scene.add(this.object3D);

路径是正确的.作为替代路线,我尝试将着色器贴在我的HTML脚本标签中,并以此为参考:

vertexShader: glslify(document.getElementById("vertexShader2").textContent),
fragmentShader: glslify(document.getElementById("fragShader2").textContent),

但这也不起作用.这里怎么了?我在他的项目中抄袭了他的包装中的任何引用GLSIFY包装.

如何复制此着色器?

推荐答案

您的WebPack配置文件是什么样的?根据错误,似乎您可能缺少module.rules列表中的加载程序.确保您包括

{
    test: /\.(glsl|frag|vert)$/,
    use: ['glslify-import-loader', 'raw-loader', 'glslify-loader']
},

,WebPack知道如何处理.frag和.vert文件.

还确保您有

"glslify": "^6.2.1",
"glslify-import-loader": "^0.1.2",
"glslify-loader": "^1.0.2",
"raw-loader": "^0.5.1",

in devDependencies在您的软件包中.

本文地址:https://www.itbaoku.cn/post/2091112.html

问题描述

Ok Im following https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/ just trying to get his custom shader to work. I brought in the .frag and .vert files (included in the link) and copied how his setup. When I run I get the error

Module parse failed: Unexpected token (3:10) You may need an appropriate loader to handle this file type.

Here:

  const material = new THREE.RawShaderMaterial({ 
    uniforms,
    vertexShader: glslify(require('./vendor/shaders/particle.vert')), //HERE!!!!
    fragmentShader: glslify(require('./vendor/shaders/particle.frag')),
    depthTest: false, //change later?
    transparent: true,
    // blending: THREE.AdditiveBlending
  });

  const geometry = new THREE.InstancedBufferGeometry();

// positions
const positions = new THREE.BufferAttribute(new Float32Array(4 * 3), 3);
positions.setXYZ(0, -0.5, 0.5, 0.0);
positions.setXYZ(1, 0.5, 0.5, 0.0);
positions.setXYZ(2, -0.5, -0.5, 0.0);
positions.setXYZ(3, 0.5, -0.5, 0.0);
geometry.addAttribute('position', positions);

// uvs
const uvs = new THREE.BufferAttribute(new Float32Array(4 * 2), 2);
uvs.setXYZ(0, 0.0, 0.0);
uvs.setXYZ(1, 1.0, 0.0);
uvs.setXYZ(2, 0.0, 1.0);
uvs.setXYZ(3, 1.0, 1.0);
geometry.addAttribute('uv', uvs);

// index
geometry.setIndex(new THREE.BufferAttribute(new Uint16Array([ 0, 2, 1, 2, 3, 1 ]), 1));

this.object3D = new THREE.Mesh(geometry, material);
this.scene.add(this.object3D);

The path is correct. As an alternate route I tried sticking the shaders in my html script tags and referencing them like this:

vertexShader: glslify(document.getElementById("vertexShader2").textContent),
fragmentShader: glslify(document.getElementById("fragShader2").textContent),

but this does not work either. What is wrong here? I copied over any reference to glsify packages in his package.json and ran npm install on my project.

How can I copy this shader?

推荐答案

What does your webpack config files look like? Based on the error, it seems you might be missing the loaders in the module.rules list. Make sure you're including

{
    test: /\.(glsl|frag|vert)$/,
    use: ['glslify-import-loader', 'raw-loader', 'glslify-loader']
},

so that Webpack knows how to handle .frag and .vert files.

Also make sure you have

"glslify": "^6.2.1",
"glslify-import-loader": "^0.1.2",
"glslify-loader": "^1.0.2",
"raw-loader": "^0.5.1",

in devDependencies in your Package.json so you're not missing any dependencies.