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

Question

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

例如，对于这张脸：

我们想要这样的 SVG：

Answer 1

这个问题在编程和数学交流之间有几个版本。我能够结合几个答案并翻译成 Three.js' Vector3 and 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 渲染：

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

How to convert a shape of a face of a 3D model in three.js into a 2D SVG?

3d

svg

collada

three.js