How to find rotation matrix between two vectors in THREE.js

Question

I am looking for a way to find the rotation matrix between two specific vectors in THREE.js.

Example

v1 = new THREE.Vector3(1, 1, 1) v2 = new THREE.Vector3(1, 1, -1)

I need this rotation matrix to rotate the whole object in the next step.

Answer 1

You can determine the rotation of two unit length vectors v1 and v2 as follows:

 var quaternion = new THREE.Quaternion(); // create one and reuse it quaternion.setFromUnitVectors( v1, v2 ); 

In your case, you need to normalize your vectors first.

Then you can apply this rotation to the object using the following template:

 var matrix = new THREE.Matrix4(); // create one and reuse it matrix.makeRotationFromQuaternion( quaternion ); object.applyMatrix( matrix ); 

Alternatively, if you do not need a matrix, you can simply apply the quaternion directly:

 object.applyQuaternion( quaternion ); 

three.js r.86

Answer 2

I do not use quaternions, instead I would do it like this (do not use THREE.js.):

construct a 4x4 transformation matrix for the first vector V1 (V1, V2 lies on its XY plane, and V1 lies on the X axis)

 double V1[3],V2[3]; // input double X[3],Y[3],Z[3],P[3]; // output double m[16]; // OpenGL like transform matrix X = V1; Z = V1 x V2; Y = X x Z; X/=|X|; Y/=|Y|; Z/=|Z|; P = (0,0,0); m[ 0]=X[0]; m[ 1]=X[1]; m[ 2]=X[2]; m[ 3]=0; m[ 4]=Y[0]; m[ 5]=Y[1]; m[ 6]=Y[2]; m[ 7]=0; m[ 8]=Z[0]; m[ 9]=Z[1]; m[10]=Z[2]; m[11]=0; m[12]=P[0]; m[13]=P[1]; m[14]=P[2]; m[15]=1; 

now apply the rotation transformation matrix around the z axis on it

 double angle = acos( (V1.v2)/(|V1|.|V2|) ) 

• rotate around the Z axis by +/- angle
• the sign of the angle depends on the order of the operands of the transverse product of the Y axis
• not sure right now with your head but you will see
• If you make a mistake, V2 will be on the opposite side.