Javascript 如何使用3个矢量（向前、向右、向上）旋转模型

我有使用3个欧拉角（aRotX、aRotY、aRotZ）在其位置（aX、aY、aZ）显示模型的代码：

---

这是可行的，但我想使用模型的前向/右向/上向向量来显示模型。如何做到这一点？

如果有3个矢量表示对象3轴的对齐，以及一个坐标，则可以手动构建一个矩阵，以根据这4个矢量定位该对象

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

因此，3个轴如

xAxis

，

yAxis

，

zAxis

和位置

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

或

或用于创建

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

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

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