在计算机图形学 —————— 空间中的物体(1)中,我讲到了网页中颜色的填充方法,这一篇,我来讲讲网页中的视点。有空间观念的话,应该知道我们的眼睛看物体总是越近的物体看得越清楚,越大,越远的物体显得越渺小,也就是近大远小的规律。

空间中的物体,从不同角度看,给我们的视觉效也是不一样的,而视点又有上下左右之分,每个方向的视点位置也同样会影响到物体的视觉效果。

综上,要展示一个空间中的物体,我们还需要三个值,即:视点,视角以及物体的远近值,可以这么表示:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
class PerspectiveCamera {
constructor(eye, front, up, fov) {
// @eye:视点, @front:视野前方坐标点, @up:视野后方坐标点, @fov:视野远近,近大远小;
this.eye = eye;
this.front = front;
this.refUp = up;
this.fov = fov;
}

initialize() {
this.right = this.front.cross(this.refUp);
this.up = this.right.cross(this.front);
this.fovScale = Math.tan((this.fov * 0.5 * Math.PI) / 180) * 2;
}
}