glsify -错误“您可能需要一个适当的加载程序来处理此文件类型”？

Question

好的，我跟随https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/，只是想让他的定制着色器工作。我引入了.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),

但这也不起作用。这里怎么了？我复制了所有引用，以便在他的package.json中使用glsify包，并在我的项目上运行npm install。

我怎样才能复制这个着色器？

Answer 1

你的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",

在devDependencies中使用Package.json，这样就不会缺少任何依赖项。