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

技术分享

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

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

主要代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
// 创建渲染器
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);

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

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

1
2
3
4
5
6
7
/**
 * @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 的值，且在照相机的可视范围内，才能被照相机投影。