javascript - glsify - 错误'您可能需要适当的加载程序来处理此文件类型'?
问题描述
好的,我关注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
在我的项目上运行。
我怎样才能复制这个着色器?
解决方案
你的 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 中,因此您不会缺少任何依赖项。
推荐阅读
- javascript - 我的函数正在返回 [对象承诺]
- gradle - Gradle build:如何设置多级项目(3+ 级)?
- python - 如何读入这个格式为字典的 JSON 文件?
- python - Python plotly 在命令行中工作,但不在 python 文件中 - 导入错误
- wpf - 如何将 RibbonGallery 与 RibbonComboBox 一起使用
- regex - 如何在匹配表达式后面的同一行中使用 sed
- python - 大小为 2 的空列表
- kotlin - 如何使用 Mapbox for Andriod 制作叶绿素,其中数据来自 GEOJSON
- sql - TSQLT - 尝试伪造表时出错
- javascript - 将“添加到购物车”中的产品详细信息放入查看篮