Three.js学习笔记

Three.js笔记(七)相机(1)

2022-03-13  本文已影响0人  BIM科学家小张

简述

在前面的章节中,已经使用PerspectiveCamera创建过相机,但是文档中还有其他类型的相机。

Camera相机

Camera类是抽象类,不能直接使用它,但可以继承这个类,从而使用它的公共属性和方法。

ArrayCamera阵列相机

ArrayCamera阵列相机用于多个相机多次渲染场景。每个相机渲染画布的特定区域,就像是老式分屏游戏,多个人共享一个屏幕。

StereoCamera立体相机

StereoCamera立体相机用于演示VR效果。

CubeCamera立方体相机

CubeCamera立方体相机用来获取各个方向上的渲染结果,仅限于前后左右上下这六个方向。可以使用这个相机来创建环境贴图和阴影。

OrthographicCamera正交相机

OrthographicCamera正交相机用于进行无透视的正交渲染,常用于各种RTS游戏。元素在屏幕上的大小与离相机的距离无关。

PerspectiveCamera透视相机

PerspectiveCamera透视相机就是常用的相机。

PerspectiveCamera透视相机和OrthographicCamera正交相机是最常用的。

PerspectiveCamera透视相机

PerspectiveCamera透视相机实例化时,需要传入参数,但之前并没有传入所有的参数。

const camera = new THREE.PerspectiveCamera(75, sizes.width / sizes.height, 1, 100)

视场角

第一个参数是视场角,即相机视图的竖直方向的角度。如果这个角度小,会得到望远镜的效果;这个角度大,会得到鱼眼镜的效果。因为相机视角内的东西将会压缩在画布尺寸大小。

一般取值45~75度。

长宽比

第二个参数是长宽比,为宽度比高度。可以简单的理解为宽度和高度。

近点和远点

第三、第四个参数为近点和远点,对应相机能看到的最近和最远的距离。任何比近点近和比远点远的对象都不会被渲染。

为了显示的更加全面,可能会想用比如0.0001和9999999这样的值作为近点和远点,这会导致一个BUG,这个BUG会导致两个面重叠。

通常情况下,使用0.1和100

OrthographicCamera正交相机

这个相机常用于特殊类型的用途。

OrthographicCamera正交相机不存在透视关系,相同大小的物体无论远近,都会渲染出相同的大小。

OrthographicCamera正交相机的参数与PerspectiveCamera透视相机参数有很大差别。

需要在摄像机的每个方向上设置看到的距离,即左、右、上、下,而非视场角,然后,再设置近点、远点。

注释之前的PerspectiveCamera透视相机,并添加OrthographicCamera正交相机。保留position位置更新部分,并调用lookAt()函数

const camera = new THREE.OrthographicCamera(- 1, 1, 1, - 1, 0.1, 100)

此时,画布中的渲染结果没有透视,而且立方体各个面看上去是平行的。并且现在有个问题,立方体看起来不像立方体。

这是由于对左、右、上、下提供的值是1或者-1,等同于是渲染一个正方形的区域,但正方形区域会被画布拉伸到匹配画布尺寸,同时,由于画布不是正方形,画面便扭曲了。

需要使用画布的长宽比,因此创建一个变量aspectRatio存储长宽比

const aspectRatio = sizes.width / sizes.height

const camera = new THREE.OrthographicCamera(- 1 * aspectRatio, 1 * aspectRatio, 1, - 1, 0.1, 100)

上一篇下一篇

猜你喜欢

热点阅读