Three.js 投影矩阵 .projectionMatrix 和 视图矩阵 .matrixWorldInverse - 文章教程

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

发布于 2021-08-08 字数 6401 浏览 893 评论 0

学习本节课之前最好对图形学中视图矩阵和投影矩阵有一定了解,同时对于 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) 方法,勇于改变自身的矩阵属性。

Object3DCameraPerspectiveCamera

Object3DCameraOrthographicCamera

相机对象的视图矩阵属性 matrixWorldInverse,字面意思是世界矩阵逆矩阵的意思,这可以看书来相机对象的视图矩阵属性就是自身世界矩阵 matrixWorld 的逆矩阵。

设置相机对象的位置属性和lookAt方法本质就是改变自身的视图矩阵属性 matrixWorldInverse

var camera = new THREE.OrthographicCamera(...);
//设置相机位置
camera.position.set(200, 300, 200);
//设置相机对象的观察目标的位置
camera.lookAt(scene.position);

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!