three.js：2 x方向矢量到3 x旋转或矩阵

Question

I have a coordinates system coded by 2 unit vectors (I have called 'Ox' and 'Oy'), 1 insertion point and, near, is an 'Oz' vector which seems to always be {0 0 1}.

For example (after 2 rotations) :

Ox:{x: 0.956304755963036, y: -0.292371704722735, z: 0}
Oy:{x: -0.250611464938861, y: -0.819713166317425, z: 0.51503807491006}
move:{x: 889.08282028218, y: -845.071708420642, z: -396.787982804802}

The question is : how to align my_mesh to this system within three.js ?

I can't really figure out how it projects, but Thanks to this answer I came to this :

if( 'Ox' in align && 'Oy' in align ){
    var mx = new THREE.Matrix4().lookAt( align.Ox , new THREE.Vector3(0,0,0), new THREE.Vector3(0,1,0) );
    var my = new THREE.Matrix4().lookAt( align.Oy , new THREE.Vector3(0,0,0), new THREE.Vector3(1,0,0) );
    mx.multiply(my);
    var qt = new THREE.Quaternion().setFromRotationMatrix(mx);

    my_mesh.matrix.makeRotationFromQuaternion(qt);
}
// move
mesh.matrix.setPosition( align.move );
mesh.matrixAutoUpdate = false;

which seems to approach the solution ?

---

EDIT

After West's answer, I realize that I should not have called this 'coordinates system' since the vectors are not orthogonal.

Below is some records after rotations ('z30' means rotate 30° around Oz).. What I called Oz is always set to {x: 0, y: 0, z: 1}

// base
Ox: {x: 1, y: 0, z: 0}
Oy: {x: 0, y: 1, z: 0}
move: {x: 6.42995404746696, y: -500, z: -268.028464077285}

// base x45
Ox: {x: 1, y: 0, z: 0}
Oy: {x: 0, y: -0.707106781186548, z: 0.707106781186547}
move: {x: 6.42995404746696, y: -73.2233047033605, z: -444.805159373921}

// base y60
Ox: {x: 0.500000000000001, y: 0, z: 0.866025403784438}
Oy: {x: 0, y: 1, z: 0}
move: {x: 6.42995404746766, y: -500, z: -268.028464077285}

// base z30
Ox: {x: 0.866025403784439, y: 0.5, z: 0}
Oy: {x: 0.5, y: -0.866025403784439, z: 0}
move: {x: -118.570045952533, y: -33.4936490538881, z: -268.028464077284}

// base z30 x45
Ox: {x: 0.866025403784439, y: 0.353553390593274, z: -0.353553390593273}
Oy: {x: 0.5, y: -0.612372435695795, z: 0.612372435695794}
move: {x: -118.570045952533, y: -96.9068910760492, z: -421.121573001233}

// base z30 x45 y60
Ox: {x: 0.739198919740117, y: 0.353553390593274, z: 0.573223304703363}
Oy: {x: 0.28033008588991, y: 0.612372435695795, z: -0.739198919740117}
move: {x: -63.6525674250102, y: -403.093108923947, z: -83.228734142255}

Answer 1

You want to set an object's orientation to align to a rotated coordinate system specified by three orthogonal unit-length vectors ox , oy , and oz .

If you don't know oz , you can compute it:

var oz = new THREE.Vector3(); // create once and reuse

oz.crossVectors( ox, oy ).normalize();

Then, since you appear to want to set mesh.matrix directly, do this:

mesh.matrix.makeBasis( ox, oy, oz ).setPosition( new_position );

mesh.matrixAutoUpdate = false; // prevent matrix from being overwritten

three.js r.87