学习理解正交相机

three.js
2023-10-18 10:24:35

在three.js当中经常用到相机这个概念,而且有许多种相机,常用的是正交相机和透视相机。可以将相机比喻现实当中人的眼睛,当眼睛在不同的角度时,看到物品的形状不太相同。假如一只鸟和一个人同时在一个位置看同一件物品,看到的也不一样,人眼睛的视角不足90度,而鸟类可以看到180度范围的东西。

↓ 会员用户可见内容 ↓

在这里人眼和鸟的眼睛就是不同的相机,人站可以站在不同位置看东西。眼睛是可以旋转的,即使站在同一个位置,眼睛也可以有一定朝向。在three.js当中,相机就是这双眼睛,它既可以设置位置(position)、也可以设置一个朝向(lookAt)。相机的参数决定了屏幕上的3D可视物的相貌。

上一章节在设置相机的部分看到以下代码:

ts 复制代码
// 设置相机
const rate = width / height
const s = 120;

const camera = new OrthographicCamera(-s * rate,
    s * rate, s, -s, 1, 1000)
camera.position.set(400, 800, 300);
camera.lookAt(scene.position)

在第一节当中看到设置相机这块代码,const camera = new OrthographicCamera(-s * rate, s * rate, s, -s, 1, 1000)

对于正交相机而言一共六个参数

OrthographicCamera( left : Number, right : Number, top : Number, bottom : Number, near : Number, far : Number )
left — 摄像机视锥体左侧面。
right — 摄像机视锥体右侧面。
top — 摄像机视锥体上侧面。
bottom — 摄像机视锥体下侧面。
near — 摄像机视锥体近端面。
far — 摄像机视锥体远端面。

↓ 会员用户可见内容 ↓

这里首次接触到视锥体这个概念,所谓视锥体就是根据一定参数,形成一定的密闭空间。由于形状像个锥形,所以被称为视锥体。
例如我们的眼界看东西,从眼睛出发,到比较远的具体是个锥形。我们视力范围其实就是个视锥体。
对于正交相机而言,尽管这个密闭空间是个立方体,同样根据习惯也可以叫做视锥体。

那么正交相机长什么样子

如图所示的这样,黄线部分就是一个正交相机,正交相机可以理解为一个长方体,锥体近端面是距离观测物的近点,远端面是观测点到物体的具体。结合上下左右四个面共同决定了这个相机。

camera.position.set(400, 800, 300);

这个函数主要改变的是移动观测点的位置,矩形正交相机在

camera.lookAt(scene.position)

这个函数相当于改变观测物观看的角度,相当于人类站在原地转眼睛。