八、三维世界

1.3D基础

1.1 视点，目标点，正方向

• 视点：观察者的位置，也叫观察点
• 目标点：可以理解为我们要看的物体
• 上方向：正方向

1.1.1 视点

观察者所在的三维空间中的位置，实现的起点。通常视点坐标用(eyeX,eyeY,eyeZ)表示

1.1.2 目标点

被观察目标所在的点。视线从视点出发，穿过观察目标点并继续延伸。

注意，观察目标点是一个点，而不是视线方向，只有同时知道观察目标点和视点，才能算出视线方向。观察目标点的坐标用(atX, atY, atZ)表示。

1.1.3 上方向

最终绘制在屏幕上的影像中的向上的方向。试想，如果仅仅确定了视点和观察点，观察者还是可能以视线为轴旋转的（如图7.4所示，头部偏移会导致观察到的场景也偏移了)。所以，为了将观察者固定住，我们还需要指定上方向。上方向是具有3个分量的矢量，用(upX, upY, upZ)表示。

2.辅助函数

2.1 归一化函数

将矩阵数组中每一个值归一化到 0-1 的区间内

function normalized(arr) {
    let sum = 0;
    for (let i = 0; i < arr.length; i++) {
        sum += arr[i] * arr[i];
    }
    const middle = Math.sqrt(sum);
    for (let i = 0; i < arr.length; i++) {
        arr[i] = arr[i] / middle;
    }
}

2.2 叉积

求两个平面的法向量

const cross=(a,b)=>{
    return new Float32Array([
        a[1]*b[2]-a[2]*b[1],
        a[2]*b[0]-a[0]*b[2],
        a[0]*b[1]-a[1]*b[0]
    ])
}

2.3 点积

求某点在x，y，z轴上的投影长度

const dot=(a,b)=>{
    return a[0]*b[0]+a[1]*b[1]+a[2]*b[2]
}

2.4 向量差

获取视点到目标点之间的向量

const minus=(a,b)=>{
    return new Float32Array([
        a[0]-b[0],
        a[1]-b[1],
        a[2]-b[2]
    ])
}

3.光照