THREE.JS入门教程(2)着色器-上

《THREE.JS入门教程(2)着色器-上》是一篇介绍Three.js着色器的教程，包含了以下内容：

1. 着色器的基本概念：该部分介绍了着色器的概念、类型（顶点着色器和片元着色器）、编写方式等基本知识点。

2. Three.js内置着色器介绍：该部分介绍了Three.js内置的着色器，包括BasicShader、LambertShader、PhongShader和ToonShader，以及它们的基本使用方法。

3. 自定义着色器：该部分介绍了如何自定义着色器，包括编写顶点着色器和片元着色器的代码、设置uniform变量和属性等。

其中，需要注意的一点是，自定义着色器是通过THREE.ShaderMaterial来使用的，需要先将顶点着色器和片元着色器分别写成字符串，然后传入ShaderMaterial的parameters中。

示例说明：

示例1:绘制一个紫色的立方体。我们可以编写一个基本的着色器，并将颜色设置为purple。代码示例如下：

// 创建一个立方体
var geometry = new THREE.BoxGeometry(1, 1, 1);
// 创建一个基础材质
var material = new THREE.MeshBasicMaterial({
    color: 0x800080
});
// 创建一个网格对象
var cube = new THREE.Mesh(geometry, material);
// 将网格对象添加到场景中
scene.add(cube);

示例2: 绘制一个数字纹理的球体。我们可以使用自定义着色器，将数字纹理应用到球体表面。代码示例如下：

// 顶点着色器代码
var vertexShader = `
    varying vec2 vUv; // 存储纹理坐标

    void main() {
        // 将纹理坐标保存到变量中
        vUv = uv;
        // 将顶点位置设置为裁剪空间的坐标
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
    }
`;
// 片元着色器代码
var fragmentShader = `
    uniform sampler2D texture; // 纹理变量
    varying vec2 vUv; // 从顶点着色器传递的纹理坐标

    void main() {
        // 根据纹理坐标，从纹理中获取颜色
        vec4 color = texture2D(texture, vUv);
        // 设置片元颜色为纹理颜色
        gl_FragColor = color;
    }
`;
// 创建一个纹理对象
var texture = new THREE.TextureLoader().load("textures/number.jpg");

// 将顶点着色器和片元着色器代码传入到ShaderMaterial中
var material = new THREE.ShaderMaterial({
    uniforms: {
        // 将纹理设置为uniform变量
        texture: { value: texture }
    },
    vertexShader: vertexShader,
    fragmentShader: fragmentShader
});

// 创建球体
var geometry = new THREE.SphereGeometry(1, 32, 32);
// 创建网格对象
var sphere = new THREE.Mesh(geometry, material);
// 将网格对象添加到场景中
scene.add(sphere);

通过上述两个示例，我们可以看到着色器的强大之处。我们可以通过自定义着色器，使得场景得到更为丰富的视觉效果，从而提高用户体验。