透视投影照相机的结构函数是:
THREE.PerspectiveCamera(fov,aspect,near,far);
上图为透视图,近平面距离和原平面距离之间是可能被渲染的物体的所在区域。a是视景体竖直方向上的张角(有些使用fov表示)。aspect等于width/height,是照相机水平方向和竖直方向长度的比值,这里通常设置为canvas的横纵比例。near和far分别是照相机到视景体的最近和最远的距离,均为正值,而且far>near。
举个例子
代码如下:
canvas {
width: 100%;
height: 100%;
}
var scene = new THREE.Scene();
var renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);
var camera = new THREE.PerspectiveCamera(45,1,1,10);
camera.position.set(0,0,5);
scene.add(camera);
//在原点处设置一个边长为1的正方体
var cube = new THREE.Mesh(new THREE.CubeGeometry(1,1,1),new THREE.MeshBasicMaterial({color:0xff0000,wireframe:true}));
scene.add(cube);
renderer.render(scene, camera);
效果如下图所示
1、竖直张角(fov越大,渲染的物体显示越小)
研究一下fov张角的改变对渲染效果的影响。将原来的45改为80,显示如图所示,正方体变得更小了。原因是:虽然正方体实际的大小并没有变化,但是照相机的竖直张角变大时,视景体变大,因而正方体对于整个视景体来说是相对变小了,所以看起来的正方形就显得变小。注意的是:fov的改变并不会引起画面的横竖比例的变化,而改变aspect才会。(因为aspect=width/height)。
声明:以上内容均参考了three.js开发指南