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' that shall be orthogonal to the plane once it has been rotated.

This vector brings me one step closer, but not fully there: THREE.Vector3 provides a function "setEulerFromRotationMatrix". Maybe I could use this, if I could figure out how to generate a rotation matrix from myVec:

A rotation matrix describes how one vector transforms into another. Thus emerges the question: which vector should be the start vector? This one (1,1,1), or this one (1,0,0)?.

Second, how do I actually make the matrix? I have had a look at , but only found how to convert from rotation matrices to something else. It must be something with reversing the matrix multiplication process in some way.

Any pointers?

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' that shall be orthogonal to the plane once it has been rotated.

This vector brings me one step closer, but not fully there: THREE.Vector3 provides a function "setEulerFromRotationMatrix". Maybe I could use this, if I could figure out how to generate a rotation matrix from myVec:

A rotation matrix describes how one vector transforms into another. Thus emerges the question: which vector should be the start vector? This one (1,1,1), or this one (1,0,0)?.

Second, how do I actually make the matrix? I have had a look at http://en.wikipedia/wiki/Rotation_matrix, but only found how to convert from rotation matrices to something else. It must be something with reversing the matrix multiplication process in some way.

Any pointers?

• javascript
• three.js

2 Answers 2

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

Any rotation in three dimensions can be represented by three angles. Your method sounds like Euler angles, have a look here: http://en.wikipedia/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/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).