摄像机,场景,渲染器 是threejs中最最重要的概念.
这时打开 learning.html 还是一片空白. 不过不要着急,学习完本节, 我们就可以往里面加点料了..
摄像机
摄像机决定你如何观察世界, 对于同一个物体,俯视和仰视看到的画面肯定是不同的. 观察点位置的移动会对观察到的画面有所影响, 在threejs中 摄像机有两种, 一种是 透视相机（THREE.PerspectiveCamera） 还有一种是 正交相机(THREE.OrthographicCamera)
1. 透视相机(THREE.PerspectiveCamera):
"透视"这一概念最多被用在美术领域, 因为我们肉眼观察到的环境都是3D的, 这个3D的影像要反映到一个2D的平面上,比如纸张或者屏幕. 那么离观察点越远的物体 就会被画的越小, 离得越近 画的越大, 这就是自然透视.
下面的例子中,所有的 盒子都是一样大的. 但是离我们越远,我们就会觉得越小.
在threejs中我们创建一个透视相机.
var camera = new THREE.PerspectiveCamera(fov, aspect, near, far); fov, aspect, near, far 分别代表了摄像机的视角、幕布宽高比、近和远两个视截面。
| 参数名 | 描述 |
|---|---|
| fov(视野) | (field of view),指摄像机可以看到的图像广度,他是一个角度.一般设置成 45-90 之间, 比如你瞪圆了眼睛,那么视野就会变得更宽, 眯上眼睛时,视野就变得很窄. |
| aspect | 生成图像的长宽比,他和 fov near/far 组合 可以确定画面的尺寸, 比如电影,它的长宽比就会比较大.在一般显示器中播放时上下会有黑边. 一般我们把它设置成和浏览器可视区 width/height 就好. |
| near (近面距离) | 指的是幕布到摄像机的距离. 小于这个值的的物体不会被投射到幕布上(你看不到你的鼻子) |
| far (远面距离) | 指的是最远可视区域到摄像机的距离. 大于这个值的的物体不会被投射到幕布上, 这个值越大 ,就意味着远处有更多的物体要被渲染 在一些大型3D游戏中,一般会让用户来指定一个最远值, 已达到性能与质量的平衡点 |
不难看出,在上面的四个参数中 fov 与 aspect 定义了一个四棱锥, near 与 far 是这个四棱锥的两个横切面,摄像机只能看到这两个横截面之间的物体.
2. 正交相机(THREE.OrthographicCamera):
正交相机 和 透视相机最大的区别在于 他不遵循近大远小的规则, 所有物体在正交相机中的尺寸都不会变,且不需要设置长宽比.
下面我们来看一个正交相机的例子:
可以看到出, 正交相机并不适合用来展现自然景物, 这种画面给人的感觉非常不自然. 但在工程图纸,教学课件,仪器零件等领域却有广泛应用.
在threejs中我们创建一个正交相机.
var camera = new THREE.OrthographicCamera( left, right, top, bottom, near, far );| 参数名 | 描述 |
|---|---|
| left | 画面的左边界. |
| right | 画面的右边界. |
| top | 画面的上边界. |
| bottom | 画面的下边界. |
| near (近面距离) | 指的是幕布到摄像机的距离. 小于这个值的的物体不会被投射到幕布上 |
| far (远面距离) | 指的是最远可视区域到摄像机的距离. |
与透视相机不同,正交相机的参数定义出的其实是一个盒子, 摄像机可以看到被这个"盒子"包含的物体.
虽然正交相机中并没有规定长宽比等参数,但是最后产生的图像 仍然是有比例的, 比如 使用 THREE.OrthographicCamera( -100, 100, 100, 100, 0.1, 1000) 定义的正交相机的图像,其长宽比为 1:1 假设如果最后显示在 16:9 的屏幕上.效果可能并不完美. 所以 一般我们把他设置成 new THREE.OrthographicCamera(-window.innerWidth, window.innerWidth, window.innerHeight, -window.innerHeight, 1, 3000) 这样比例就与页面同步了.