1

So Im currently playing around with three.js and have used vite to setup the document. I've created a separate fragment.glsl so I dont have to write code inside the shadermaterial. But in the console i get the following error:

Uncaught SyntaxError: Unexpected token '{' (at fragment.glsl?import:1:13)

The fragment.glsl file looks like:

void main() {
        gl_FragColor = vec4(1., 0., 0., 1.);
};

I tried importing the file from my /shaders/ folder using:

import fragment from './shaders/fragment.glsl'

And expected it to run the code when I used it in my shaders material:

this.material = new THREE.ShaderMaterial({
            fragmentShader: fragment,
            uniforms: {
                progress: {
                    type: 'f',
                    value: 0,
                },
                side: THREE.DoubleSide,
            },
        })

But all i get is errors in the console. I cant seem to figure out what Im doing wrong. I didnt expect importing a file would be so troublesome. Does anyone see what Im doing wrong?

Lauenborg
  • 11
  • 2

1 Answers1

0

I faced same problem and solved it by installing vite-plugin-glsl. It has a simple setup instruction, after it was installed the import problem was resolved.

flppv
  • 4,111
  • 5
  • 35
  • 54