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.