threejs/shader/将mesh的世界空间变换传入shader以得到正确光照

今天刚开始写shader material，要实现的是在一个已经有波形变化的平面上做基本Phong光照。本来PlaneGeometry是在XOY平面中的，转了九十度到XOZ平面上，结果发现出来的渲染效果不太对：

后来想了想，是因为我在创建mesh之后又旋转了mesh：

    sea.rotation.x = -Math.PI/2;

但是这并不会改变mesh.vertices中存储的position值，因为它们是model space的，而变换是在world space中进行的。

要改正很简单，mesh.matrixWorld保存了世界空间变换的矩阵，将其作为uniform传入vertex shader，乘modelMatrix即可。
代码：

varying vec2 vUv;
varying vec3 worldPos;
varying vec3 vNormal;
uniform mat4 transform;
void main() { 
    vUv = uv; 
    vNormal = normal;
    gl_Position = projectionMatrix * modelViewMatrix  * vec4( position, 1.0 ); 
    // 配合片段着色器的光照计算，在世界空间中进行
    worldPos = transform * modelMatrix * vec4(position.xyz, 1.0);

}

修正后：