透视相机 PerspectiveCameraPerspectiveCamera定义了一个视锥frustum。frustum是一个切掉顶的三角锥或者说实心金字塔型。 说到实心体solid在这里通常是指一个立方体、一个圆锥、一个球、一个圆柱或锥台。PerspectiveCamera通过四个属性来定义一个视锥。near定义了视锥的前端far定义了后端fov是视野通过计算正确的高度来从摄像机的位置获得指定的以near为单位的视野定义的是视锥的前端和后端的高度。aspect间接地定义了视锥前端和后端的宽度实际上视锥的宽度是通过高度乘以 aspect 来得到的。以下为旋转立方体为例// 导入import*asTHREEfromthree;// 场景constscenenewTHREE.Scene();// 相机// params 视野角度宽高比近裁剪平面远裁剪平面constcameranewTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);// 渲染器constrenderernewTHREE.WebGLRenderer();// 设置渲染器大小// params 宽度高度renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);// 立方体// params 宽度高度深度constgeometrynewTHREE.BoxGeometry(1,1,1);// 材质// params 颜色constmaterialnewTHREE.MeshBasicMaterial({color:0x00ff00});// 网格// params 几何体材质/* 网格是一个接受几何体并将材质应用于其上的对象 然后我们可以将它插入场景中并自由移动。 */constcubenewTHREE.Mesh(geometry,material);scene.add(cube);/* 当我们调用 scene.add() 时 添加的对象会被放置在坐标 (0,0,0) 处。 这会导致相机和立方体重叠在一起。为了避免这种情况 我们只需将相机稍微向外移动一些 */camera.position.z5;// 渲染场景// params 场景相机// renderer.render( scene, camera );/** * 动画循环 * param {number} time - 时间戳 */functionanimate(time){// 旋转立方体cube.rotation.xtime/2000;cube.rotation.ytime/1000;renderer.render(scene,camera);}// 设置动画循环// params 动画函数renderer.setAnimationLoop(animate);正交摄像机 OrthographicCamera和指定一个视锥不同的是它需要设置leftrighttopbottomnear和far指定一个长方体使得视野是平行的而不是透视的。我们将left和bottom设置成 -2right和top设成 2这样就使盒子宽为四个单位高四个单位。我们的BoxGeometry( 1, 1, 1 );设置为1个单位所以此时立方体是可以在4*4中正常展示的// 正交投影相机// params 左右上下近裁剪平面远裁剪平面/* 和指定一个视锥不同的是 它需要设置leftright topbottomnear和far指定一个长方体 使得视野是平行的而不是透视的 */constcameranewTHREE.OrthographicCamera(-2,2,-2,2,1,1000);// 渲染器constrenderernewTHREE.WebGLRenderer();// 设置渲染器大小renderer.setSize(window.innerWidth,window.innerHeight);document.body.appendChild(renderer.domElement);// 立方体// params 宽度高度深度constgeometrynewTHREE.BoxGeometry(1,1,1);// 材质// params 颜色constmaterialnewTHREE.MeshBasicMaterial({color:0x00ff00});constcubenewTHREE.Mesh(geometry,material);scene.add(cube);/* 当我们调用 scene.add() 时 添加的对象会被放置在坐标 (0,0,0) 处。 这会导致相机和立方体重叠在一起。为了避免这种情况 我们只需将相机稍微向外移动一些 */camera.position.z100;// 由于已经是平行显示的所以摄像机的距离只要在立方体前方就会正常显示不会因为透视原因而改变立方体大小如图此时角色摄像机离近屏的距离不太近就不会影响到对物品立方体的观测同时物品的位置也不能超出整个画布