004使用透视照相机绘制多个立方体

本文实例主要通过使用 THREE. PerspectiveCamera,实现在场景中通过透视照相机以透视效果绘制多个立方体。

在场景中以透视效果绘制的三个立方体,如下:

主要代码如下:

// 创建渲染器
var myRenderer = new THREE.WebGLRenderer({
    antialias: true
});
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1.0);
$('#myContainer').append(myRenderer.domElement);
// 创建场景
var myScene = new THREE.Scene();
// 创建透视相机
var myCamera = new THREE.PerspectiveCamera(
    45,
    window.innerWidth / window.innerHeight,
    0.1,
    1000,
);
myCamera.position.set(40.06, 20.92, 42.68);
myCamera.lookAt(new THREE.Vector3(0, 0, 0));
// 创建第一个立方体
var myGeometry1 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial1 = new THREE.MeshNormalMaterial();
var myMesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
myMesh1.translateX(-40);
myScene.add(myMesh1);

// 创建第二个立方体
var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial2 = new THREE.MeshNormalMaterial();
var myMesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
myMesh2.translateX(-10);
myScene.add(myMesh2);

// 创建第三个立方体
var myGeometry3 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial3 = new THREE.MeshNormalMaterial();
var myMesh3 = new THREE.Mesh(myGeometry3, myMaterial3);
myMesh3.translateX(20);
myScene.add(myMesh3);

// 渲染三个相同大小的立方体
myRenderer.render(myScene, myCamera);

对于透视投影而言,投影的结果除了与几何体的角度有关,还与距离有关。人的眼睛观察世界就是透视投影,比如一条铁路,距离越远会感到两条轨道之间的宽度越小。

创建透视照相机的语法格式如下:

/**
 * @param {number} fov 视角
 * @param {number} aspect 渲染窗口的宽高比
 * @param {number} near 近裁剪面
 * @param {number} far 远裁剪面
 */
var myCamera = new THREE.PerspectiveCamera(fov, aspect, near, far)

在上面的示例中,fov 表示视角,所谓视角就是能看到的角度范围,人的眼睛大约能够看到 180° 的视角,视角大小的设置要根据具体应用,一般游戏设置为 60~90°,默认值为45°;

参数 aspect 表示渲染窗口的宽高比,通常是 window.innerWidth / window.innerHeight;

参数 near 表示从距离照相机多远的位置开始渲染,一般情况下设置一个很小的值,默认值是 0.1;

参数 far 表示从距离照相机多远的位置结束渲染,如果设置的值偏小,将看不到部分场景,默认值是 1000。

一般情况下,只有离透视照相机的距离大于 near 的值且小于 far 的值,且在照相机的可视范围内,才能被照相机投影。