
Title:
Angle of Rotation  Interactive 3D Graphics

Description:

I have my axis of rotation. It's negative X, Z. It's a good idea to normalize

this, but this will do for now. If I look at my cube, it's pretty easy to figure

out the diagonal directions themselves. Here is the easiest one. It goes from

negative one, negative one, negative one to one, one, one. So the cylinder's

axis is (2,2,2). We can also this vector's length to find the distance from one

corner to another. These are the facts we need to continue. We've got the axis

of rotation. We need the angle to rotate and the length of the cylinder itself.

Here's three JS code that computes the cylinder's length. Three JS uses a class

called Vector3. What you put in a vector 3 a point or a vectors coordinate is up

to you. Perhaps a better name might have been coordinate 3 but that' pretty

bulky most graphic systems you'll encounter will call coordinates vectors but

it's easy enough to understand from the context what is meant. To find the

cylinders axis direction and length I set up the 2 corner locations I then

subtract one vector from the other using the sub vectors method. Giving a vector

from one point to another. There are a huge number of vector and matrix

operations supported in 3JS, subtraction is just one of many. Once we have the

cylinder axis, this last line of code computes the length of this axis, which

we'll need for knowing how long to make the cylinder. At this point, we have the

axis of rotation The length of the cylinder, but we don't have the angle of

rotation yet. However, we have everything we need to get it. Given this

cylinder's access, we can dot product it with the y axis, which is where the

cylinder starts at, and then, by the dot product of that and its final

position... We will get the angle that we need to rotate. Remember that the dot

product computes the cosine of the angle between two normalized vectors. So we

normalize the cylinder's axis here and takes its dot product with the y axis

vector here. This gives us the cosine of the angle. So we take the arc cosine to

get the angle back in radiants. Using a dot product is a bit of overkill, by the

way. Computing a dot product with a y axis like this is the same as just

grabbing the y component of the cylAxis. We could've simply normalized and done

this like this code here. However, unless this is a critical loop, like we're

making a billion of these ornaments, I'd recommend using this first way. If

someone reads or modifies this code in the future, the intent is clearer and

more general. Now we have all the facts we need to make this object, the axis

and angle of rotation and the length of the cylinder. So let's get cracking.

Well, I guess I should mention that the sign of the theta might be a little bit

questionable here. We could use the right had rule to make sure we have the

direction of rotation right. Or we could use the principle of negate and try

again. I learned about this practice long ago from an article in an old trade

journal called SGI Insider. It was great to realize that someone else was doing

what I also do. If I put a rotation in and it goes the wrong direction, just try

the opposite. So feel free to do the same, as you're in good company. You could

spend 15 minutes trying to figure out the sign needed after some set of matrix

operations, and still have about a 50 percent chance of getting it right.

Faster, more reliable is just to try it and see. That said, this practice won't

help much if there are too many things to negate or if the rotation is part of a

long chain of transforms. Or if you're starting from an incorrect algorithm.

But, if you're feeling the math is solid, go ahead and just do it. Using this

principle with my test program, I found I needed to negate the angle to move the

rod to the correct place. I guess I could've thought it through and realized

this is the righthand rule, and all that kind of stuff, but nonetheless, just

trying it made me realize we need to. To have a negative theta. I don't really

like negative angles, I like to think positively, so I negated both the angle

and the axis direction. This should give exactly the same rotation. If you

rotate clockwise around one axis, rotating counter clockwise around the opposite

axis' direction is the same thing.