three.js使用着色器

three.js 中的着色器（Shader）是一种用于在 GPU 上运行的程序，它们可以用来实现高级的图形效果。three.js 使用着色器来渲染场景中的物体，包括光照、阴影、纹理、透明度等效果。

在 three.js 中使用着色器需要创建一个 ShaderMaterial 对象，并且为其指定 vertex shader 和 fragment shader。vertex shader 用于处理顶点数据，fragment shader 用于处理像素数据。例如，下面是一个简单的着色器示例：

var vertexShader = `
    void main() {
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;

var fragmentShader = `
    void main() {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
    }
`;

var shaderMaterial = new THREE.ShaderMaterial({
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

var geometry = new THREE.BoxGeometry(1, 1, 1);
var cube = new THREE.Mesh(geometry, shaderMaterial);
scene.add(cube);

上面的着色器将所有的顶点位置乘以投影矩阵和模型视图矩阵，然后将所有像素设置为红色。在这个例子中，我们创建了一个 ShaderMaterial 对象，并将其作为参数传递给一个 BoxGeometry 对象的构造函数，从而创建了一个红色的立方体。