08 Three.js 帮你做了什么

ShaderMaterial：自己写整个材质

左边的球完全由右侧代码着色。改代码，切换材质类型和 GLSL 版本。

材质类型

GLSL 版本

每个像素运行一次拖动数字，或直接改代码

uniform float uTime;
uniform sampler2D uMap;
varying vec2 vUv;
varying vec3 vNormal;

void main() {
  float stripes = step(0.5, fract(vUv.x * 12.0 + uTime * 0.2));
  vec3 color = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), stripes);
  vec3 tex = texture2D(uMap, vUv * vec2(4.0, 2.0)).rgb;
  color = mix(color, tex, 0.3);
  float light = max(dot(normalize(vNormal), normalize(vec3(-0.4, 0.8, 1.0))), 0.0);
  gl_FragColor = vec4(color * (0.25 + 0.75 * light), 1.0);
}

uniform float uTime;
uniform sampler2D uMap;
varying vec2 vUv;
varying vec3 vNormal;

void main() {
  float stripes = step(0.5, fract(vUv.x * 12.0 + uTime * 0.2));
  vec3 color = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), stripes);
  vec3 tex = texture2D(uMap, vUv * vec2(4.0, 2.0)).rgb;
  color = mix(color, tex, 0.3);
  float light = max(dot(normalize(vNormal), normalize(vec3(-0.4, 0.8, 1.0))), 0.0);
  gl_FragColor = vec4(color * (0.25 + 0.75 * light), 1.0);
}

JS 这一侧material.uniforms.uTime.value = 0.00

ShaderMaterial 自动注入矩阵和属性声明；RawShaderMaterial 什么都不加。GLSL 3.00 用 in/out 和 texture()。

试一试

改片元代码里的 12.0，条纹变多
切到 RawShaderMaterial，读多出来的声明
切到 GLSL 3.00，比较名字的变化
点「完整代码」看 Three.js 真正编译的源码