glsify-错误“您可能需要适当的加载程序来处理此文件类型"? [英] glsify - error 'You may need an appropriate loader to handle this file type'?

问题描述

好吧我在 https://tympanus .net/codrops/2019/01/17/interactive-particles-with-three-js/只是想让他的自定义着色器正常工作.我引入了.frag和.vert文件(包含在链接中)，并复制了他的设置.当我运行时出现错误

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

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

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

这里:

  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脚本标签中，并像这样引用它们:

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),

，但这也不起作用.这是怎么了我复制了对他的package.json中的glsify软件包的所有引用，并在我的项目中运行npm install.

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.

如何复制此着色器?

推荐答案

您的Webpack配置文件是什么样的?基于该错误，看来您可能在module.rules列表中缺少装载程序.确保您要加入

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']
},

，以便Webpack知道如何处理.frag和.vert文件.

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

还要确保您拥有

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

在Package.json中的devDependencies中，因此您不会丢失任何依赖项.

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

这篇关于glsify-错误“您可能需要适当的加载程序来处理此文件类型"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！