3D rotation with Axis & Angle

Question

I know 3D rotation is well documented on SO and many other sites, but despite reading countless explanations I still haven't figured out where I'm going wrong. My background is in art and design, not math and programming, and I'm never really certain if my angle of attack (no pun intended) is the right one. Rather than paste a patchwork of my dismal code, I'm including an image describing my problem. What I'd really like is a step-by-step worded breakdown of how to solve it. Pseudo code is useful, but I will learn more if someone will just aim me in the right direction or point out common pitfalls.

---

Red = X-Axis, Green = Y-Axis, Blue = Z-Axis

Magenta vectors = origin --> some X,Y,Z point

Magenta cube = average of the endpoints of the two magenta vectors (is there a better name for this?)

White vector = cross product of the two magenta vectors (extended for display, actual vector is normalized)

Cyan cube object = rotation fail

---

I've previously used Away3D and Papervision; in these libraries, applying Euler angles to an object's rotationX, rotationY, or rotationZ properties will rotate the object locally, as if it's at the origin regardless of its actual position. With Three.js, this is not the case. Modifying an object's rotation.x and rotation.y properties produces a bizarre effect where the object apparently tilts a bit on the Z axis. Even more confusing is that this happens when the object rests at the origin. I thought that maybe using Quaternion-->Matrix or Axis/Angle-->Matrix functions would solve my problem, but no dice. It seems there's a core concept I'm not getting.

Anyway, what I'd like to do is orient the cube to the cross product vector (white), so that the top of the cube is facing the direction of that vector. Then I'd like to rotate the cube along the same axis. The image I've attached shows the result of more hours than I'd like to admit trying to achieve this result. My code loosely looks like this:

axis = Vector3.cross(a, b)
axis.normalize()
angle = 45 * TO_RADIANS;
quat = AxisAngle2Quaternion(axis, angle)
rot = Quaternion2Matrix(quat)
cube.matrix = rot

Thanks in advance,

Casey

---

Edit: Starting a bounty

Maybe I am misunderstanding how this is supposed to work. Here's another image:

Am I incorrect in thinking that this magenta vector is the axis, and the orange arrows indicate rotation about this axis based on the angle? One way or another, I want to orient the cyan cube based on some directional vector and spin it. What am I doing wrong!?

Answer 1

Your approach sounds correct but you don't show what the a, b vectors are and the constant angle is, I'm guessing, just for testing. I did this before so I dug up my code and this is the math I found...

given:
originalVec = unit vector pointing up Y axis (direction of cube top/normal)
targetVec = white vector

Now you want the axis and angle that will rotate originalVec to align with targetVec. The most direct axis of rotation is perpendicular to both input vectors, so take their cross product. That axis is not a unit vector so also normalise it. The angle to rotate (in radians) is the inverse-cosine of the dot-product.

axis = Vector3.cross(originalVec, targetVec)
axis.normalise
angle = inversecos(Vector3.dot(originalVec, targetVec))

quat = AxisAngle2Quaternion(axis, angle)
rot = Quaternion2Matrix(quat)
cube.matrix = rot

Instead of replacing the cube's matrix I think you want to compose it with the new transform...

cube.matrix.multiplyBy(rot)

...but I'm not 100% sure about that. Also, I've seen implementations where AxisAngle2Quaternion takes an angle in degrees. When the input vectors are parallel or opposite the axis is <0,0,0> so that should be tested for. If the cube rotates the wrong way then the cross-product vector parameters are in the wrong order, I never remember which and just try them both. hth.

Edit
I've had a chance to play with Three.js and hacked one of the examples to orient a cube. Comments show where I added stuff and all the orienting math happens in alignCube().
Align and Spin example
Mousing up/down moves the target line. Mousing left/right spins on the line.

Scene objects in Three.js seem to all inherit from Object3D which has a autoUpdateMatrix property set true by default. This needs to be set false otherwise the updateMatrix function gets called which recalculates the matrix from the objects position, scale and rotation properties. Alternately you could assign a different updateMatrix function.

It'd be nice if Three.js had some documentation :)