如何使用3个向量(向前,向右,向上)旋转模型

时间:2019-10-13 17:28:27

标签: javascript webgl

我有使用3个欧拉角(aRotX,aRotY,aRotZ)在其位置(aX,aY,aZ)显示模型的代码:

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);

这可行,但我想使用其前向/右/上矢量显示模型。该怎么做?

1 个答案:

答案 0 :(得分:2)

如果您有3个向量表示对象3轴的对齐方式和坐标,则可以手动构建矩阵以从这4个向量中定位该对象。

轴向量{x,y,z}的长度应表示沿该轴的比例。如果对向量进行归一化,则比例将为1。将向量乘以缩放对象。

因此,三个轴分别为xAxisyAxiszAxis和位置coord在世界空间中

4×4矩阵作为数组

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
 ]);

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

或者用于创建mat4

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

请记住,轴矢量的长度会缩放该轴。

有时3轴并非全部垂直,并且可能使对象倾斜。您可以使用2轴的叉积找到第3轴。例如,z轴未知或未对齐。

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