Question

I’m working on a JavaScript/Canvas 3D FPS-like engine and desperately need a normal vector (or look-at vector if you will) for near and far plane clipping. I have the x and y axis rotation angles and am able to do it easily with only one of them at the time, but I just can’t figure out how to get both of them…

The idea is to use this vector it to calculate a point in front of the camera, the near and far clipping planes must also be definable by constants so the vector has to be normalized, I hoped that with only the angles it would be possible to get this vector length to 1 without normalizing, but that’s not the problem.

I don’t have any roll (rotation around z axis) so it’s that much easier.

My math looks like this:

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)};

Then clip a point in 3D space by testing the vector from the plane to it by means of a dot product.

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

When a point is behind the player its projection coordinates are reversed (x=-x, y=-y) so nothing makes sense any more, that’s why I’m trying to remove them.

I want that green arrow there, but in 3D.

Answer 1

After some intensive brain processing I figured out that

1. My original look-at vector was (0, 0, 1)
2. The z-rotation angle (roll) was always 0
3. There was no reason for the rotation matrix found on Wikipedia not to work

By applying the full rotation matrix on the (0, 0, 1) vector and taking in account that rz = 0 the solution I got was:

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)};

And now everything works perfectly. The error was using only the x and y rotation matrices without taking in account rz = 0 for all angles which changed the matrix a little.