CODEWITHSUNDEEP
mathmatrixvectorthree.js
kriskodzi
kriskodzi

Reputation: 691

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

I'm looking for the way to find rotation matrix between two defined vectors in THREE.js.

For Example

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

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

Upvotes: 19

Views: 15630

Answers (2)

WestLangley
WestLangley

Reputation: 104763

You can define a rotation from two unit-length vectors v1 and v2 like so:

const quaternion = new THREE.Quaternion(); // create one and reuse it

quaternion.setFromUnitVectors( v1, v2 );

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

You can then apply that rotation to an object using the following pattern:

const matrix = new THREE.Matrix4(); // create one and reuse it

matrix.makeRotationFromQuaternion( quaternion );

object.applyMatrix4( matrix );

Alternatively, if you do not require the matrix, you can just apply the quaternion directly:

object.applyQuaternion( quaternion );

three.js r.152

Upvotes: 34

Spektre
Spektre

Reputation: 51835

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

construct 4x4 transform matrix for first vector V1 (V1,V2 lays on its XY plane and V1 is 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 rotation transform matrix around Z axis on it

double angle = acos( (V1.v2)/(|V1|.|V2|) )
  • rotate around Z axis by +/- angle
  • the angle sign depends on the Y axis cross product operands order
  • not sure right now from the head but you will see
  • if you set it wrong the V2 will be on opposite side

Upvotes: 1

Related Questions