How to rotate model using 3 vectors (forward, right, up)

Question

I have code for displaying model at it's position (aX, aY, aZ) using 3 euler angles (aRotX, aRotY, aRotZ):

var m = mat4.create();
mat4.identity(m);
mat4.translate(m, [aX, aY, aZ]);
mat4.rotateX(m, aRotX);
mat4.rotateY(m, aRotY);
mat4.rotateZ(m, aRotZ);

This works, but I want to display the model using it's forward/right/up vectors. How to do that?

Answer 1

If you have 3 vectors representing the alignment of an objects 3 axis, and a coordinate you can manually build a matrix to position that object from these 4 vectors.

The axis vector {x,y,z} should have a length that represents the scale along that axis. If you normalize the vectors the scale will be 1. Multiply the vectors to scale the object.

So the 3 axis as xAxis , yAxis , zAxis and the position coord is in world space

The 4 by 4 matrix as an array

const matrix4 = new Float32Array([
       xAxis.x, xAxis.y, xAxis.z, 0,
       yAxis.x, yAxis.y, yAxis.z, 0,
       zAxis.x, zAxis.y, zAxis.z, 0,
       coord.x, coord.y, coord.z, 1
 ]);

Or

const matrix4 = new Float32Array([...xAxis, 0, ...yAxis, 0, ...zAxis, 0,  ...coord, 1]);

Or using to create mat4

const mat = mat4.create().fromValues(...xAxis, 0, ...yAxis, 0, ...zAxis, 0,  ...coord, 1);

Remember that the length of the axis vectors scales the that axis.

Sometimes the 3 axis are not all perpendicular and may skew the object. You can use the cross product of 2 axis to find the 3rd axis. Example the z axis is not known or not aligned.

const mat = mat4.create().fromValues(
     ...xAxis, 0, 
     ...yAxis, 0, 
     ...vec3.cross(vec3.create(), xAxis, yAxis), 0,
     ...coord, 1
);