4.相机Camera——决定了场景中哪个角度的景色会被渲染出来

相机决定了场景中哪个角度的景色会被渲染出来。Threejs提供的相机有正交相机 OrthographicCamera、透视相机 PerspectiveCamera、全景相机 CubeCamera 和 3D相机 StereoCamera。主要介绍正交相机和透视相机。

透视相机 PerspectiveCamera

透视相机更接近人眼的观看效果,有“近大远小”的效果。

var camera = new THREE.PerspectiveCamera(fov, aspect, near, far);

透视相机

属性

  • fov — 相机视椎体垂直视角,从下到上的观察角度。— 人差不多有180度的视角,但计算机显示器一般会选择一块儿较小的区域。对于游戏来说,大多数情况下会用60-90度左右的视角。推荐默认值:45。
  • zoom — 获取或设置相机缩放因子。
  • near — 相机视椎体近裁剪面,相机开始渲染场景的地方,通常会设一个很小的值,从而可以看到所有物体。推荐默认值:0.1。
  • far — 远裁剪面。相机结束渲染场景的地方,如果值太低,场景中的一部分可能不会被渲染;如果值太高,某些情况下会影响渲染效率。推荐默认值:1000。
  • focus — 焦点,用于立体视觉和场深度效果的目标距离。
  • aspect — 相机视椎体宽高比。一般会使用整个窗口作为输出界面。推荐默认值:window.innerWidth/window.innerHeight。
  • view — 视椎体窗口规格或null。
  • filmGauge — 胶片尺寸,默认35mm镜头。这个参数不影响投影变换矩阵,除非.filmOffset设定为一个非0值
  • filmOffset — 水平偏移,单位是mm,默认值是0

方法

  • getEffectiveFOV( ) — 返回考虑了缩放系数 .zoom 的当前视角,单位为角度。
  • getFocalLength( ) — 返回当前和 .filmGauge 有关的 .fov 的焦距。
  • getFilmWidth( ) — 返回胶片上图像的宽度。如果 .aspect >= 1(景观格式 landscape format),结果等于 .filmGauge。
  • getFilmHeight( ) — 返回胶片上图像的高度。如果 .aspect <=1(肖像格式 portrait format),结果等于 .filmGauge。
  • setFocalLength( focalLength ) — 设置当前和 .filmGauge 有关的 .fov 的焦距。默认为35mm。
  • setViewOffset( fullWidth, fullHeight, x, y, width, height ) — 同 OrthographicCamera。
  • clearViewOffset( ), .updateProjectionMatrix( ), .clone( ), .toJSON — 同 OrthographicCamera。
demo:camera-perspectiveCamera.html

正交相机 OrthographicCamera

正交相机重在表现物体的实际尺寸,没有近大远小的效果;一般是用在制图、建模上面。

var camera = new THREE.OrthographicCamera(left, right, top, bottom, near, far);

正交相机

属性:

  • zoom — 获取和设置相机缩放因子。
  • left:左平面距离相机中心点的垂直距离。从图中可以看出,左平面是屏幕里面的那个平面。
  • right:右平面距离相机中心点的垂直距离。从图中可以看出,右平面是屏幕稍微外面一点的那个平面。
  • top:顶平面距离相机中心点的垂直距离。上图中的顶平面,是长方体头朝天的平面。
  • bottom:底平面距离相机中心点的垂直距离。底平面是头朝地的平面。
  • near:近平面距离相机中心点的垂直距离。近平面是左边竖着的那个平面。
  • far:远平面距离相机中心点的垂直距离。远平面是右边竖着的那个平面。

方法:

  • setViewOffset( fullWidth, fullHeight, x, y, width, height ) — 该方法用于在一个较大的视椎体中设置视图偏移。这对于多窗口或多监视器/多机设置是有用的。 注意,没有任何理由在一个网格中的显示屏必须具备同样的尺寸。

    • fullWidth — 多视图设置的全宽
    • fullHeight — 多视图设置的全高
    • x — 副摄像头的水平偏移
    • y — 副摄像头的垂直偏移
    • width — 副摄像头的宽度
    • height — 副摄像头的高度
  • clearViewOffset( ) — 清除视图偏移。

  • updateProjectionMatrix( ) — 更新相机投影矩阵,必须在参数发生变化后调用。
  • clone( ) — 返回一个 OrthographicCamera 对象的克隆。
  • toJSON( ) — 把相机数据转换成JSON格式。
demo:camera-orthographicCamera.html
threejs
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。