如何将three.js中的3D模型的面部形状转换为2D SVG？

Question

是否可以在 three.js 中生成具有模型特定面形状的 SVG？我们正在为 3D 模型开发交互式编辑器，您可以在其中在每面墙上进行绘制，但我们遇到了这个问题。

例如，对于这张脸：

我们想要一个这样的 SVG：

Answer 1

在编程和数学交流之间存在这个问题的几个版本。我能够结合几个答案并翻译成 Three.js 的 Vector3 和 Quaternion 类。

假设您要渲染此tetrahedron OBJ 的第一面：

const points3D = [
  Vector3(0.0, 0.0, 1.732051),
  Vector3(1.632993, 0.0, -0.5773503),
  Vector3(-0.8164966, 1.414214, -0.5773503),
];

function pointsInPlaneToPoints2D (points3D) {
  // The normal is a unit vector that sticks out from face.
  // We're using the first 3 points, assuming that there
  // are at least 3, and they are not co-linear.
  const [p0, p1, p2] = points3D;
  const planeNormal =
    (new Vector3()).crossVectors(
      (new Vector3()).subVectors(p0, p1),
      (new Vector3()).subVectors(p1, p2)
    ).normalize();
  
  // Unit vector on the Z axis, where we want to rotate our face
  const zUnit = new Vector3(0, 0, 1);
  
  // Quaternion representing the rotation of the face plane to Z
  const qRot = (new Quaternion()).setFromUnitVectors(planeNormal, zUnit);
  
  // Rotate each point, assuming that they are all co-planar
  // with the first 3.
  return points3D.map(function (p) {
    const pRot = p.clone().applyQuaternion(qRot);
    // Output format [x, y] (ignoring z)
    return [pRot.x, pRot.y];
  });
}

const points2D = points3DInPlaneToPoints2D(points3D);
// Draw those with your 2D drawing context of choice

这是 truncated icosahedron 的面孔，用这个函数展平，并用 SVG 渲染：