javascript - 来自欧拉 Angular 的 3D 法线/观察向量

Question

我正在开发一个类似 JavaScript/Canvas 3D FPS 的引擎，迫切需要一个法线向量(如果您愿意，也可以是观察向量)来进行近平面和远平面裁剪。我有 x 轴和 y 轴旋转 Angular ，当时只用其中一个就可以轻松完成，但我就是不知道如何获得这两个 Angular ...

想法是用这个向量来计算相机前面的一个点，近和远的裁剪平面也必须由常数定义，所以向量必须归一化，我希望只有 Angular 它会可以在不进行归一化的情况下将该向量长度设为 1，但这不是问题所在。

我没有任何滚动(绕 z 轴旋转)所以它更容易。

我的数学是这样的:

zNear = 200; // near plane at an arbitrary 200 "points" away from camera position

// normal calculated with only y rotation angle (vertical axis)
normal = {
    x: Math.sin(rotation.y),
    y: 0,
    z: Math.cos(rotation.y)};

然后通过点积测试从平面到它的向量，在 3D 空间中裁剪一个点。

nearPlane = {
    x: position.x+normal.x*zNear,
    y: position.y+normal.y*zNear,
    z: position.z+normal.z*zNear};

// test a point at x, y, z against the near clipping plane
if(
    (nearPlane.x-x)*normal.x+
    (nearPlane.y-y)*normal.y+
    (nearPlane.z-z)*normal.z < 0
)
{
    return;
}

// then project the 3D point to screen

当一个点在玩家身后时，它的投影坐标会反转(x=-x，y=-y)，所以没有任何意义了，这就是我试图移除它们的原因。

我想要那个绿色箭头，但是是 3D 的。

Answer 1

经过一些密集的大脑处理后，我想通了

1. 我原来的观察向量是 (0, 0, 1)
2. z 轴旋转 Angular (滚动)始终为 0
3. 在 Wikipedia 上找不到旋转矩阵的原因不工作

通过在 (0, 0, 1) 向量上应用完整的旋转矩阵并考虑到 rz = 0，我得到的解决方案是:

normal = {
    x: Math.cos(camera.rotation.x)*Math.sin(camera.rotation.y),
    y: -Math.sin(camera.rotation.x),
    z: Math.cos(camera.rotation.y)*Math.cos(camera.rotation.x)};

现在一切正常。错误是仅使用 x 和 y 旋转矩阵，而没有考虑所 Angular rz = 0，这稍微改变了矩阵。