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

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

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 进入屏幕。

谢谢！

解决方法

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

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

通过采用一般的 3D 旋转矩阵（所有三个 3D 旋转矩阵相乘在一起，您可以在 Wikipedia page 上找到它）并将其应用于向量 (1,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 方向开始的）。