Acabo de empezar a aprender Three.js y estoy tratando de hacer mi primer proyecto, pero el sombreador me da un error de sintaxis no capturado tonto : token inesperado '{'
no sé por qué Todo se ve bien, creo. Así que tengo un archivo JavaScript simple que es:
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();y dos sombreadores:
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; }