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

Question

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

我正在尝试在 HTML 中显示 3D 模型 - 具有实际的 HTML 标签和 CSS 转换。我已经将 OBJ 文件加载到 Javascript class 实例中。

模型已三角化。我的第一个目标只是将三角形显示为平面（HTML 元素是矩形的）- 稍后我将 'cutting out' 具有 CSS 剪辑路径的三角形。

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

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

以下摘录显示了面孔的创建/'rendering'。我使用面法线作为旋转，但我知道这是错误的。

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 上旋转它。

我想我需要 'decompose' 我的三角形旋转到单独的轴旋转 - 即在 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) 然后您可以得到三个角度 a、b 和 c 的方程需要将初始向量旋转到向量 (x,y,z)。这导致：

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 方向开始旋转）。

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

3D model in HTML/CSS; Calculate Euler rotation of triangle

javascript

css

3d

geometry

rotation