Question

I’m currently trying to render a polygon mesh in isometric (html5 canvas 2d context).
My work is almost done except I cannot find the right calculation/algorithm to find the plane rotation.

In example I have plane A and B defined by 2 vector Ox, Oy

var planeA = {
    Ox: {
        x: 1,
        y: -2,
        x: 1,
    }, Oy: {
        x: 1,
        y: -1,
        z: 0,
    }
}

var planeB = {
    Ox: {
        x: 0,
        y: 1,
        x: 0,
    }, Oy: {
        x: 0,
        y: 0,
        z: -1,
    }
}

I want to find alpha (rotation around Ox), beta (rotation around Oy) and gamma (rotation around Oz) to apply on plane A to make plane A have the same normal with plane B.

Answer 1

First, find the normals by taking the cross-product of the vectors and then normalizing.

To take the cross-product of two vectors, A and B, use this formula:

C_x = A_y*B_z – A_z*B_y
C_y = -A_x*B_z + A_z*B_x
C_z = A_x*B_y – A_y*B_x

(Notice that the order matters. In general, AxB ≠ BxA.)

So for your two planes, the cross-products are (1,1,1) and (-1,0,0).

To normalize a vector, divide it by its magnitude. So the normal vectors of your planes are (1/sqrt(3))(1,1,1) and (-1,0,0).

Now to rotate on vector into another (I will assume you have atan2(), and that you have the right-hand rule down cold):

1. Rotate around O_x: to get A into the XZ plane, rotate by atan2(A_y, A_z).
2. Rotate around O_y: to get to the correct phi (angle from O_z)). Phi_B is atan2(sqrt(B_x²+B_y²), B_z), so rotate by atan2(sqrt(B_x²+B_y²), B_z) – atan2(A_x, A_z)
3. Rotate around O_z: to get to the correct “longitude”, rotate by atan2(B_y, B_x) – atan2(A_y, A_x).

So in your example, you would rotate A around O_x by π/4 to get (sqrt(2/3), 0, sqrt(1/3)), then around O_y by π/2 – atan(sqrt(2)) to get (1,0,0), then around O_z by π to get (-1,0,0).