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

Question

学习本节课之前最好对图形学中视图矩阵和投影矩阵有一定了解，同时对于 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);