Three.js: From Plane-orthogonal Vector To Plane Rotation Matrix

I want to set the rotation of a plane. This requires three numbers denoting the rotation in radians in the x, y and z axes. I don't have these numbers, but, I have a vector 'myVec'

Solution 1:

In three.js r50, the default plane is located at the origin and it's normal points in the positive-z direction. So it is the vector ( 0, 0, 1 ) that you want to transform to myVec. But you don't have to do that directly.

The easiest way to do what you want in three.js is like so.

var v = myPlane.position.clone();
v.add( myVec );
myPlane.lookAt( v );

Let three.js do the math for you. :-)

EDIT: Updated to three.js r.66

Solution 2:

Any rotation in three dimensions can be represented by three angles. Your method sounds like Euler angles, have a look here: http://en.wikipedia.org/wiki/Euler_angles

When you want to construct a rotation matrix for a rotation around 3 angles at once, you have to construct 3 matrices first, each of which performs rotation around one axis by a given angle. Then you have to multiply the 3 matrices (in the correct order) to get your final rotation matrix.

If you know how to rotate the vector (1 0 0) to match your final vector, you just need to figure out the angles around the respective axes. Mind the order of the rotations. You may start with any other vector, too. You just need to know the angles.

A matrix which rotates around a given axis by a given angle can be found here: http://en.wikipedia.org/wiki/Rotation_matrix (see "Basic rotations" under "In three dimensions").

Under "General rotations" you'll find the method I just described to you (multiplying 3 matrices to get one matrix for the entire rotation).