002使用正交相机绘制多个立方体

技术分享

此实例主要通过使用 THREE. OrthographicCamera，实现在场景中根据正交相机的投影规则绘制多个立方体。

在下面的代码中 myCamera = new THREE. OrthographicCamera(-sk, sk, s, -s, 1, 1000) 用于创建正交照相机，然后 Three.js 将按照正交投影算法自动计算几何体的投影结果；对于正交投影而言，多条直线（或其他几何图形）放置的角度不同，则这些直线在投影面上的投影结果的长短则不同。

如果刚好是直角(即正交)，则其长短完全相同，即正交投影与距离无关，只与角度相关。THREE. OrthographicCamera() 方法的语法格式如下：

1
2
3
4
5
6
7
8
9
/**
 * left: 左边界
 * right: 右边界
 * top: 上边界
 * bottom: 下边界
 * near: 近裁界面，表示距离相机多远的位置开始渲染，默认值是 0.1
 * far: 远裁界面，表示距离相机多远的位置截止渲染，默认值为1000，注意该值设置太小，将有部分场景看不到
 */
const myCamera = THREE.OrthographicCamera(left, right, top, bottom, near, far)

一般会设置左边界和右边界互为相反数，上边界和下边界互为相反数，目的是为了让图形(网格模型)能够显示在中间位置。

主要的javascript 代码如下：

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
// 创建渲染器
var myRenderer = new THREE.WebGLRenderer();
myRenderer.setSize(window.innerWidth, window.innerHeight);
myRenderer.setClearColor('white', 1);
$('#myContainer').append(myRenderer.domElement);
// 创建场景
var myScene = new THREE.Scene();
// 创建正交相机
var width = window.innerWidth;
var height = window.innerHeight;
var k = width / height;
var s = 24;
var myCamera = new THREE.OrthographicCamera(
    -s * k, // left 左边界
    s * k, // right 右边界
    s, // top 上边界
    -s, // bottom 下边界
    1, // near 近裁界面
    1000, // far 远裁界面
);
myCamera.position.set(-1.66, 2.21, 18.1);
myCamera.lookAt(myScene.position);
// 创建第一个立方体
var myGeometry1 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial1 = new THREE.MeshNormalMaterial();
var mesh1 = new THREE.Mesh(myGeometry1, myMaterial1);
mesh1.translateX(-14);
myScene.add(mesh1);
// 创建第二个立方体
var myGeometry2 = new THREE.BoxGeometry(16, 16, 16);
var myMaterial2 = new THREE.MeshNormalMaterial();
var mesh2 = new THREE.Mesh(myGeometry2, myMaterial2);
mesh2.translateX(14);
myScene.add(mesh2);
// 渲染两个相同大小的立方体
myRenderer.render(myScene, myCamera);