003使用CameraHelper绘制正交相机

技术分享

通过在 THREE. CameraHelper() 方法的参数中设置 OrthographicCamera，实现绘制辅助线以查看正交相机的「视角范围」。

当浏览器显示页面时，绿色的圆球将不停的旋转，正交照相机(黄色和红色的辅助线条表示正交照相机的视角范围)也同步旋转。

1
myOrthographicCameraHelper = new THREE.CameraHelper(myOrthographicCamera); // 创建正交相机的辅助线

一般情况下，在一个场景中，如果想看到正交照相机的视角范围辅助线，则需要两个相机：一个是主照相机（不可见），一个是辅助照相机（可见）。在本实例中 myOrthographicCameraHelper 是辅助照相机，myCamera 是主照相机。

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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
// 定义变量myAspect，用于存储窗口的宽高比
var myAspect = window.innerWidth / window.innerHeight;
// 定义变量myFrustrumSize，用于设置相机的视锥体大小
var myFrustrumSize = 700;
// 定义变量，用于存储相机、场景、渲染器和球体网格对象
var myCamera, myScene, myRenderer, mySphereMesh;
// 定义变量，用于存储正交相机及其辅助对象
var myOthographicCamera, myOthographicCameraHelper;

// 创建渲染器，使用抗锯齿和透明通道
myRenderer = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
});
// 设置渲染器的大小与窗口大小匹配
myRenderer.setSize(window.innerWidth, window.innerHeight);
// 设置渲染器的清除颜色和透明度
myRenderer.setClearColor('white', 1.0);
// 将渲染器的DOM元素添加到页面的指定容器中
$('#myContainer').append(myRenderer.domElement);

// 创建场景
myScene = new THREE.Scene();

// 创建透视相机，并设置其参数
myCamera = new THREE.PerspectiveCamera(45, myAspect, 1, 5000);
// 设置相机位置
myCamera.position.z = 2500;

// 创建正交相机，并设置其参数
myOthographicCamera = new THREE.OrthographicCamera(
    (0.5 * myFrustrumSize * myAspect) / -2,
    (0.5 * myFrustrumSize * myAspect) / 2,
    myFrustrumSize / 2,
    myFrustrumSize / -2,
    150,
    1000,
);
// 创建正交相机的辅助对象，并添加到场景中
myOthographicCameraHelper = new THREE.CameraHelper(myOthographicCamera);
myScene.add(myOthographicCameraHelper);

// 创建球体网格对象，并设置其几何体和材质
mySphereMesh = new THREE.Mesh(
    new THREE.SphereBufferGeometry(200, 16, 8),
    new THREE.MeshBasicMaterial({
        color: 'green',
        wireframe: true
    }),
);
// 将球体添加到场景中
myScene.add(mySphereMesh);

// 开始渲染循环
animate();

function animate() {
    // 请求下一帧动画
    requestAnimationFrame(animate);
    // 更新球体的位置和正交相机的朝向
    var r = Date.now() * 0.00005;
    mySphereMesh.position.x = myFrustrumSize * Math.cos(r);
    mySphereMesh.position.y = myFrustrumSize * Math.sin(r);
    mySphereMesh.position.z = myFrustrumSize * Math.sin(r);
    myOthographicCamera.lookAt(mySphereMesh.position);
    // 渲染场景
    myRenderer.render(myScene, myCamera);
}