threejs中的着色器入门三

着色器模拟光照

更新顶点着色器来向片元着色器传递顶点的法向量。
创建一个varying修饰的变量vNormal，顶点着色器和片元着色器都应该包含该变量，用于它们之间的传递。

<script id="vertexShader" type="x-shader/x-vertex">
			//normal three.js内置法线， position three.js内置位置

	varying vec3 vNormal;
	void main() {
	  // 将vNormal设置为normal，normal是Three.js创建并传递给着色器的attribute变量
	  vNormal = normal;
	  gl_Position = projectionMatrix *modelViewMatrix 
	  						*vec4(position, 1.0);
	}
</script>

在片元着色器中，创建一个同名变量，然后将法线向量与定义的光线向量点乘，并将结果作用于颜色，将会呈现类似平行光效果。

<script id="fragmentShader" type="x-shader/x-vertex">
	varying vec3 vNormal;
	void main() {
	  // 定义光线向量
	  vec3 light = vec3(0.5,0.2,1.0);
	  // 归一化向量
	  light = normalize(light);
	  // 计算光线向量和法线向量的点积，如果点积小于0（即光线无法照到），就设为0
	  float dProd = max(0.0, dot(vNormal, light));
	  // 填充片元颜色
	  gl_FragColor = vec4(dProd, // R
	                      dProd, // G
	                      dProd, // B
	                      1.0);  // A
	} 
</script>

使用点积的原因：两个向量的点积表名它们之间的“相似度”。如果两个归一化的向量，并且方向相同，点积为1；如果两个向量方向相反，点积为-1。
所以当物体的面在模拟光线的背面，将呈现黑色，正对光线的面赋予白色。

threejs的着色器内置变量

变量	说明	类型
position	顶点位置	vec3
normal	法线向量	vec3
uv	纹理坐标	vec2