three.js 中照相机是一个必不可少的元素,想象一个场景,照相机就像一个人的眼睛,屏幕中呈现的场景就是照相机看到的场景。接下来细细说下three.js中照相机怎么来使用。
照相机的作用
Three.js创建的场景是三维的,而显示屏是二维的,三维需要投影到二维平面上。照相机定义了三维空间到二维屏幕的投影方式,根据投影方式的不用,照相机又分为正交投影照相机与透视投影照相机。
正交投影照相机
构造函数解释
1 | THREE.OrthographicCamera(left, right, top, bottom, near, far) |
这六个参数分别代表相机拍摄空间的六个面距离相机的位置,这六个面围成一个长方体,我们称其为视景体(Frustum)。只有在视景体内部(下图中的灰色部分)的物体才可能显示在屏幕上,而视景体外的物体会在显示之前被裁减掉。
为了保持照相机的横竖比例,需要保证(right - left)
与(top - bottom)
的比例与Canvas宽度与高度的比例一致。
near
与far
都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机忽略,一般near
的值设置得较小,far
的值设置得较大,具体值视场景中物体的位置等决定。
实例说明
下面,我们通过一个例子来说明正交投影照相机的设置。
基本设置
初始化渲染器:
1 | var renderer = new THREE.WebGLRenderer(); |
设置照相机:
1 | var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); |
在原点处创建一个边长为1
的正方体,这里使用wireframe
便于看到正方体的边:
1 | let geometry = new THREE.CubeGeometry(1,1,1); |
得到效果:
此时相机正看向z轴负方向,而正方体中心处于原点(上下左右面据中心0.5),后面的边与前面重合。这就是正交投影与透视投影区别,不会因投影改变比例。
调整照相机位置
接下来我们通过改变照相机的位置来查看渲染结果,观察位置对渲染的影响。
在之前的例子中,我们将照相机设置在(0, 0, 5)
位置,而由于照相机默认是面向z轴负方向放置的,所以能看到在原点处的正方体。现在,如果我们将照相机向下移动1
个单位:
1 | var camera = new THREE.OrthographicCamera(-2, 2, 1.5, -1.5, 1, 10); |
得到效果如下:
物体看上去向上移动了1
个单位,且刚好与视景体
的top面重合。就好比人往低处站了,物体看起来就相对往上移动了。
那么,正交投影照相机在设置时,是否需要保证top
和bottom
是相反数呢?如果不是,那么会产生什么效果呢?下面,我们将原本的参数(-2, 2, 1.5, -1.5, 1, 10)
改为(-2, 2, 0.5, -2.5, 1, 10)
,即,将视景体设置得更靠下:
1 | var camera = new THREE.OrthographicCamera(-1, 3, 0.5, -2.5, 1, 10); |
得到效果:
这与之前向下移动照相机得到的效果是等价的。
调整照相机角度
现在,我们想尝试一下仰望这个正方体。我们已经学会设置照相机的位置,不妨将其设置在(4, -3, 5)
处:
1 | camera.position.set(4, -3, 5); |
现在照相机沿z轴负方向观察的,因此观察不到正方体,只看到一片黑。我们可以通过lookAt
函数指定它看着原点方向:
1 | camera.lookAt(new THREE.Vector3(0, 0, 0)); |
仰望正方体效果: