Three.js投影矩阵 .projectionMatrix 、视图矩阵 .matrixWorldInverse

学习本节课之前最好对图形学中视图矩阵和投影矩阵有一定了解，同时对于Three.js的正投影相机 OrthographicCamera 、透视投影相机 PerspectiveCamera 有一定了解。

关键词：投影矩阵、视图矩阵、正投影、透视投影、视点、目标观察点、上方向、正投影相机、透视投影相机

如果你对图形学中视图矩阵、投影矩阵相关内容比较了解有助于本节课的学习，如果不了解的话可以根据关键词去检索一下相关的内容去学习补充。

相机对象属性 .matrixWorldInverse 和 .projectionMatrix

正投影相机 PerspectiveCamera 和透视投影相机 OrthographicCamera 的基类是相机 Camera ,相机对象 Camera 具有视图矩阵属性 .matrixWorldInverse 和投影矩阵属性 .projectionMatrix 。

相机对象本质就是视图矩阵和投影矩阵，顶点坐标经过平移旋转缩放模型变换以后，还需要经过视图、投影变换才能显示到画布上。

Matrix4 方法：正投影 .makeOrthographic()

正投影公式：

\begin{bmatrix} \frac{2}{right-left} & 0& 0& -\frac{right+left}{right-left}& \ 0& \frac{2}{top-bottom}& 0& -\frac{top+bottom}{top-bottom}& \ 0& 0& -\frac{2}{far-near}& -\frac{far+near}{far-near}& \ 0& 0& 0& 1& \end{bmatrix}

矩阵对象 Matrix4 的方法 .makeOrthographic() 封装了正投影的算法，该方法用来创建一个正投影矩阵，在正投影相机对象 OrthographicCamera 中会调用该方法更新相机对象的投影矩阵属性 .projectionMatrix

方法参数：.makePerspective( left,right,top,bottom,near,far)

正投影相机 OrthographicCamera

正投影相机 OrthographicCamera 类封装调用了矩阵对象 Matrix4 的正投影矩阵变换方法 .makeOrthographic() 。执行该方法用来改变正投影相机对象的投影矩阵属性 .projectionMatrix 。

// OrthographicCamera.js源码
this.projectionMatrix.makeOrthographic( left, right, top, bottom, this.near, this.far )
构造函数PerspectiveCamera(left,right,top,bottom,near,far)
正投影相机设置例子
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
var k = width / height; //窗口宽高比
var s = 150; //三维场景显示范围控制系数，系数越大，显示的范围越大
//创建相机对象
var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
Matrix4方法：透视投影矩阵.makePerspective()
透视投影公式：
\begin{bmatrix}
\frac{near}{right} &  0&  0& 0& \
 0&  \frac{near}{top}&  0& 0& \
 0&  0&  -\frac{far+near}{far-near}& -\frac{2farnear}{far-near}& \
 0&  0&  -1& 0&
\end{bmatrix}
矩阵对象Matrix4的方法.makePerspective()封装了透视投影的算法，该方法用来创建一个透视投影矩阵，在透视投影相机对象PerspectiveCamera中会调用该方法更新相机对象的投影矩阵属性.projectionMatrix。
方法参数：.makePerspective( left,right,top,bottom,near,far)
透视投影相机PerspectiveCamera
透视投影相机PerspectiveCamera类封装调用了矩阵对象Matrix4的透视投影矩阵变换方法.makePerspective()。执行该方法用来改变透视投影相机对象的投影矩阵属性.projectionMatrix。
// PerspectiveCamera.js源码
this.projectionMatrix.makePerspective(...);
构造函数PerspectiveCamera(fov,aspect,near,far)
透视投影相机使用例子
var width = window.innerWidth; //窗口宽度
var height = window.innerHeight; //窗口高度
/**透视投影相机对象*/
var camera = new THREE.PerspectiveCamera(60, width / height, 1, 1000);
camera.position.set(200, 300, 200); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
Matrix4方法：.lookAt()
矩阵对象Matrix4的.lookAt()方法对图形学中投影矩阵算法进行了封装，也就是通过给定的参数生成变换矩阵，视图矩阵和模型矩阵一样会用于场景中对象的平移旋转等变换，该方法通常用于构建相机对象的视图矩阵.matrixWorldInverse属性。
参数：.lookAt(eye,center, up )
三个参数都是三维向量对象Vector3，eye是视点也就是观察位置，center表示被观察的位置，up表示向上的方向。
Object3D方法.lookAt(x,y,z)
Object3D类封装了矩阵对象Matrix4的.lookAt()方法，得到一个新的方法.lookAt(x,y,z),参数表示xyz是相机的目标观察点。
通过Object3D对象的.lookAt(x,y,z)方法可以改变自身的四元数属性.quaternion,四元数属性.quaternion和对象角度属性rotaion一样表示对象的旋转变换，可以转化为旋转矩阵，进而改变对象的本地矩阵属性.matrix和世界矩阵属性.matrixWorld。
// Object3D.js源码
// `.lookAt()`方法计算得到的旋转矩阵对象m1改变对象的四元数属性.quaternion
this.quaternion.setFromRotationMatrix( m1 );
透视投影相机PerspectiveCamera和正投影相机OrthographicCamera的基类是相机对象Camera，相机对象的基类是Object3D，所以相机对象会继承Object3D的.lookAt(x,y,z)方法，勇于改变自身的矩阵属性。
Object3D → Camera → PerspectiveCamera
Object3D → Camera → OrthographicCamera
相机对象的视图矩阵属性matrixWorldInverse，字面意思是世界矩阵逆矩阵的意思，这可以看书来相机对象的视图矩阵属性就是自身世界矩阵matrixWorld的逆矩阵。
设置相机对象的位置属性和lookAt方法本质就是改变自身的视图矩阵属性matrixWorldInverse。
var camera = new THREE.OrthographicCamera(...);
//设置相机位置
camera.position.set(200, 300, 200);
//设置相机对象的观察目标的位置
camera.lookAt(scene.position);