请举例几个three.js着色器编程案例并注释

1. 简单的颜色着色器
这个着色器可以用来给场景中的物体上色。它只是简单的将物体的颜色设置为红色，但可以通过修改uniform变量来更改颜色。

vertexShader: `
  varying vec3 vNormal;
  void main() {
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`,
fragmentShader: `
  uniform vec3 color;
  varying vec3 vNormal;
  void main() {
    gl_FragColor = vec4(color * vNormal, 1.0);
  }
`

2. 纹理着色器
这个着色器可以用来给物体贴上纹理。它包括了一个纹理采样器，可以从纹理图像中获取颜色。可以通过修改uniform变量来更改纹理。

vertexShader: `
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`,
fragmentShader: `
  uniform sampler2D texture;
  varying vec2 vUv;
  void main() {
    gl_FragColor = texture2D(texture, vUv);
  }
`

3. 高级着色器：Phong着色器
Phong着色器使用了一种更高级的光照模型，可以让物体看起来更真实。它包括了漫反射、镜面反射和环境光照。可以通过修改uniform变量来更改光照颜色和强度。

uniform vec3 ambientLightColor;
uniform vec3 directionalLightColor;
uniform vec3 directionalLightDirection;

varying vec3 vNormal;
varying vec3 vViewPosition;

void main() {

  vec4 diffuseColor = vec4(1.0, 1.0, 1.0, 1.0);

  vec3 ambient = ambientLightColor * diffuseColor.rgb;

  vec3 directionalVector = normalize(directionalLightDirection);
  float directional = max(dot(vNormal, directionalVector), 0.0);
  vec3 directionalLight = directionalLightColor * diffuseColor.rgb * directional;

  vec3 totalLight = ambient + directionalLight;

  gl_FragColor = vec4(totalLight, diffuseColor.a);
}