深入理解Three.js中正交摄像机OrthographicCamera
前言 在 深入理解Three.js中透视投影照相机PerspectiveCamera 那篇文章中讲解了透视投影摄像机的工作原理以及对应一些参数的解答,那篇文章中也说了会单独讲解 Three.js 中另一种常用的摄像机正交摄像机 OrthographicCamera ,这篇文章将会详细的讲解正交摄像机的工作原理和其对应参数的用法,当然,为了能够让读者更加直观的理解正交摄像机,我会制作一个与正交摄像机相关的 demo 来直观的让读者感受正交摄像机的魅力。 原理说明 深入理解Three.js中透视投影照相机PerspectiveCamera 文章中提到过正交摄像机和透视投影摄像机最大的区别是投影到的物体大小不受距离的影响,说直白点就是透视投影摄像机投影物体是通过点(下图a),相当于我们的眼睛,距离越远,能够看到的部分也就越小。正交摄像机投影物体是通过平面(下图b),无论距离有多远,投射到二维平面的线始终的是平行的,所以看上去就会感觉物体的大小没有受到任何影响。 正交摄像机参数说明 实现一个简单正交摄像机的代码如下: 1 var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, 1, 1000 ); 2 scene.add( camera ); new THREE