THREE.JS学习笔记二:照相机

我们使用 Three.js 创建的场景是三维的,而通常情况下显示屏是二维的,那么三维的场景 如何显示到二维的显示屏上呢?照相机就是这样一个抽象,它定义了三维空间到二维屏幕 的投影方式,用“照相机”这样一个类比,可以使我们直观地理解这一投影方式。

照相机分正交投影和透视投影

(图片来源于Three.js入门指南)

(a)透视投影,(b)正交投影

正交投影照相机(Orthographic Camera)设置起来较为直观,它的构造函数是:

THREE.OrthographicCamera(left, right, top, bottom, near, far)

(图片来源于Three.js入门指南)

为了保持照相机的横竖比例,需要保证 (right - left) 与 (top - bottom) 的比例与 Canvas 宽度与高度的比例一致,比如说宽高比是400::300,那么left(-2 )-right(2):top(-1.5)-bottom(1.5),这样就是比例一致的;400:300和4:3。near 与 far 都是指到照相机位置在深度平面的位置,而照相机不应该拍摄到其后方的物 体,因此这两个值应该均为正值。为了保证场景中的物体不会因为太近或太远而被照相机 忽略,一般 near 的值设置得较小, far 的值设置得较大,具体值视场景中物体的位置等 决定。

扫描二维码关注公众号,回复: 5079860 查看本文章

透视投影照相机(Perspective Camera)的构造函数是:

THREE.PerspectiveCamera(fov, aspect, near, far)

(图片来源于three.js入门指南)

透视图中,灰色的部分是视景体,是可能被渲染的物体所在的区域。

fov 是视景体竖直方 向上的张角(是角度制而非弧度制),如侧视图所示。fov的值变大(视景体变大),模型大小没有改变的话看起来会变的比较小

aspect 等于 width / height ,是照相机水平方向和竖直方向长度的比值,通常设为 Canvas 的横纵比例。

near 和 far 分别是照相机到视景体最近、最远的距离,均为正值,且 far 应大于 near 。

改变 fov 并不会引起画面横竖比例的变化,而改变 aspect 则会改变横竖比例

猜你喜欢

转载自blog.csdn.net/joyvonlee/article/details/85709196