将 PlaneGeometry 与 ShaderMaterila 一起使用时，我的浏览器会抛出“程序信息日志：片段着色器未编译。”

Question

我是 Three.js 的新手，并且在 Three.js 的 0.167.0 版本上运行。

我尝试使用 ShaderMaterial 创建 PlaneGeometry，但出现错误并且场景中没有任何渲染。

这是我的代码片段。

glsl.js

import * as THREE from "three";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(
  45,
  window.innerWidth / window.innerHeight,
  0.01,
  1000,
);
const oribit = new OrbitControls(camera, renderer.domElement);

camera.position.set(0, 0, 12);
oribit.update();

const geometry = new THREE.PlaneGeometry(10, 10, 30, 30);
const material = new THREE.ShaderMaterial({
  uniforms: {
    u_time: { type: "f", value: 0.0 },
  },
  vertexShader: `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    `,
  fragmentShader: `
    void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0)
    }`,
  wireframe: true,
});
const mesh = new THREE.Mesh(geometry, material);
scene.add(mesh);

function animate() {
  renderer.render(scene, camera);
}

renderer.setAnimationLoop(animate);

window.addEventListener("resize", function () {
  camera.aspect = window.innerWidth / this.window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

我尝试了各种不同的方式来导入 Three.js。

Answer 1

您错过了

fragment

中的分号，可能在控制台错误中进行了描述。

const material = new THREE.ShaderMaterial({
  uniforms: {
    u_time: { type: "f", value: 0.0 },
  },
  vertexShader: `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
    }
    `,
  fragmentShader: `
    void main() {
        gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }`,
  wireframe: true,
});