I just started learning Three.js and am trying to make my first project, but the shader gives me a silly Uncaught SyntaxError: Unexpected token '{'
I don't know why. Everything looks good, I think. So I have a simple JavaScript file which is:
import * as THREE from "three";
import fragment from "./shaders/fragment.glsl";
import vertex from "./shaders/vertex.glsl";
export default class Sketch {
constructor() {
this.renderer = new THREE.WebGLRenderer({ antialias: true });
this.renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById("container").appendChild(this.renderer.domElement);
this.camera = new THREE.PerspectiveCamera(
70,
window.innerWidth / window.innerHeight,
0.1,
1000
);
this.camera.position.z = 1;
this.scene = new THREE.Scene();
this.addMesh();
this.time = 0;
this.render();
}
addMesh() {
this.geometry = new THREE.PlaneBufferGeometry(1, 1);
this.material = new THREE.MeshNormalMaterial({ side: THREE.DoubleSide });
this.material = new THREE.ShaderMaterial({
fragmentShader: fragment,
vertexShader: vertex,
uniforms: {
progress: { type: "f", value: 0 },
},
side: THREE.DoubleSide,
});
this.mesh = new THREE.Points(this.geometry, this.material);
this.scene.add(this.mesh);
}
render() {
this.time++;
this.mesh.rotation.x += 0.05;
this.mesh.rotation.y += 0.05;
this.renderer.render(this.scene, this.camera);
window.requestAnimationFrame(this.render.bind(this));
}
}
new Sketch();and two shaders:
void main(){
gl_FragColor = vec4(1., 0., 0., 1.)
}
varying vec2 vUv;
void main() {
vUv = uv;
vec4 mvPosition = modelViewMatrix * vec4(position, 1.);
gl_PointSize = 50. * (1. / - mvPosition.z);
gl_Position = projectionMatrix * mvPosition;
}