title: 3D rotation with Axis & Angle
body: <p>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.</p>
  
  <hr>
  
  <p><img src="https://i.stack.imgur.com/jsAwk.jpg" alt="alt text"></p>
  
  <p>Red = X-Axis, Green = Y-Axis, Blue = Z-Axis</p>
  
  <p>Magenta vectors = origin --> some X,Y,Z point</p>
  
  <p>Magenta cube = average of the endpoints of the two magenta vectors (is there a better name for this?)</p>
  
  <p>White vector = cross product of the two magenta vectors (extended for display, actual vector is normalized)</p>
  
  <p>Cyan cube object = rotation fail</p>
  
  <hr>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <pre><code>axis = Vector3.cross(a, b)
  axis.normalize()
  angle = 45 * TO_RADIANS;
  quat = AxisAngle2Quaternion(axis, angle)
  rot = Quaternion2Matrix(quat)
  cube.matrix = rot
  </code></pre>
  
  <p>Thanks in advance,</p>
  
  <p>Casey</p>
  
  <hr>
  
  <p><strong>Edit: Starting a bounty</strong></p>
  
  <p>Maybe I am misunderstanding how this is supposed to work. Here's another image:</p>
  
  <p><img src="https://i.stack.imgur.com/r4AX7.jpg" alt="alt text"></p>
  
  <p>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!?</p>