HTML/CSS 中的 3D 模型；计算三角形的欧拉旋转

Question

TLDR；给定一组三角形顶点和一个法向量（都在单位空间中），如何计算三角形在世界空间中的 X、Y、Z 欧拉旋转角？

我正在尝试以 HTML 格式显示 3D 模型 - 带有实际的 HTML 标记和 CSS 转换。我已经将 OBJ 文件加载到 Javascript 类实例中。

模型是三角剖分的。我的第一个目标只是将三角形显示为平面（HTML 元素是矩形） - 稍后我将使用 CSS 剪辑路径“剪切”三角形。

我真的很难理解并正确旋转模型的三角形。

我认为旋转矩阵可以帮助我，但我唯一的经验是我已经有了旋转向量，我需要将其转换并发送到 WebGL。这次没有 WebGL（或教程）让事情变得更容易。

以下摘录显示了人脸的创建/“渲染”。我使用正常的面部作为旋转，但我知道这是错误的。

for (const face of _obj.faces) {

  const vertices = face.vertices.map(_index => _obj.vertices[_index]);

  const center = [
    (vertices[0][0] + vertices[1][0] + vertices[2][0]) / 3,
    (vertices[0][1] + vertices[1][1] + vertices[2][1]) / 3,
    (vertices[0][2] + vertices[1][2] + vertices[2][2]) / 3
  ];

  // Each vertex has a normal but I am just picking the first vertex' normal
  // to use as the 'face normal'.

  const normals = face.normals.map(_index => _obj.normals[_index]);
  const normal = normals[0];

  // HTML element creation code goes here; reference is 'element'.

  // Set face position (unit space)

  element.style.setProperty('--posX', center[0]);
  element.style.setProperty('--posY', center[1]);
  element.style.setProperty('--posZ', center[2]);

  // Set face rotation, converting to degrees also.

  const rotation = [
    normal[0] * toDeg,
    normal[1] * toDeg,
    normal[2] * toDeg,
  ];

  element.style.setProperty('--rotX', rotation[0]);
  element.style.setProperty('--rotY', rotation[1]);
  element.style.setProperty('--rotZ', rotation[2]);
}

CSS 首先在 X,Y,Z 上平移人脸，然后在 X,Y,Z 上依次旋转。

我认为我需要将三角形的旋转“分解”为单独的轴旋转 - 即先在 X 上旋转，然后在 Y 上旋转，然后在 Z 上旋转，以根据模型面获得正确的旋转。

我意识到法线向量给了我一个方向，而不是围绕它自己的旋转——我需要计算它。我想我必须确定一个三角形边上的矢量并将其与法线交叉，但这是我不清楚的。

我花了几个小时研究关于 SO 的类似问题，但我不够聪明，无法理解或让它们为我工作。

是否可以描述在没有 Latex 方程式的情况下要采取的步骤？我擅长伪代码，但我的数学技能严重缺乏。

完整代码在这里：https://whoshotdk.co.uk/cssfps/（查看 HTML 源代码） 网格构建函数在第 422 行。

OBJ 文件在这里：https://whoshotdk.co.uk/cssfps/data/model/test.obj Blender 文件在这里：https://whoshotdk.co.uk/cssfps/data/model/test.blend

网格只是一个角度的单个平面，在我的示例中（错误地）显示为粉红色。

世界设置成-X在左边，-Y在上，-Z在屏幕上。

谢谢！

Answer 1

如果您有一个平面并希望将其旋转到与某个法线相同的方向，您需要计算出该平面的法线向量与您想要的法线向量之间的角度。两个 3D 向量之间的欧拉角可能很复杂，但在这种情况下，初始平面法线应该始终相同，因此我假设平面法线开始指向正 X 以简化数学运算。

您可能还想在平移之前进行旋转，这样一切都会变得更容易，因为您将围绕坐标系的原点进行旋转。

通过获取通用 3D 旋转矩阵（所有三个 3D 旋转矩阵相乘，您可以在 Wikipedia page 上找到它）并将其应用于向量 (1,0,0)，然后您可以得到方程将初始向量旋转到向量 (x,y,z) 需要三个角度 a、b 和 c。这导致：

x = cos(a)*cos(b)

y = sin(a)*cos(b)

z = -sin(b)

然后重新排列这些方程以找到 a、b 和 c，这将是您需要的三个角度（分别是 rotation 数组的三个值）：

a = atan(y/x)

b = asin(-z)

c = 0

所以在你的代码中，这看起来像：

const rotation = [
    Math.atan2(normal[1], normal[0]) * toDeg,
    Math.asin(-normal[2]) * toDeg,
    0
];

您可能需要使用不同的旋转矩阵（如果旋转的顺序不是您所期望的）或不同的起始向量（尽管您可以只使用此方法，然后进行额外的 90 度旋转，如果例如，每个平面实际上都从正 Y 方向开始）。