[英]glsify - error 'You may need an appropriate loader to handle this file type'?
Ok Im following https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/ just trying to get his custom shader to work.好的,我关注https://tympanus.net/codrops/2019/01/17/interactive-particles-with-three-js/只是想让他的自定义着色器工作。 I brought in the.frag and.vert files (included in the link) and copied how his setup.我带来了 .frag 和 .vert 文件(包含在链接中)并复制了他的设置。 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.模块解析失败:意外令牌 (3:10) 您可能需要适当的加载程序来处理此文件类型。
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:作为替代路线,我尝试将着色器粘贴在我的 html 脚本标签中并像这样引用它们:
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.我在他的 package.json 中复制了对 glsify 包的任何引用,并在我的项目上运行了npm install
。
How can I copy this shader?我怎样才能复制这个着色器?
What does your webpack config files look like?您的 webpack 配置文件是什么样的? Based on the error, it seems you might be missing the loaders in the module.rules
list.根据该错误,您似乎可能缺少module.rules
列表中的加载程序。 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.以便 Webpack 知道如何处理.frag
和.vert
文件。
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.在您的devDependencies
中的 devDependencies 中,因此您不会缺少任何依赖项。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.