Question

我正在尝试将3D网格展平为2D形状。我想要实现的是this

基本上，您在图像中看到的是给定网格及其沿不同视图的轮廓。我想对任何使用Three.js的网格做同样的事情，但我不知道如何才能获得轮廓。

我想到了两种可能的解决方案：

1）复制网格并沿给定的轴缩放它以使其变平（例如，如果我想获得形状的轮廓，我看到从正Z看到负面，我只需将其缩放为这样：

myMesh.scale.z = 0.001 // Small value to make it "2D-like"

问题：我正在复制并重新绘制可能非常大的网格，因此效率不高。

2）将网格的顶点投影到2D平面，使它们全部处于同一水平，然后在顶点之间创建线条。

问题：像这样它完全不起作用，因为我丢失了有关顶点如何作为面连接的信息。生成的形状将完全取决于顶点的投影顺序。

例如，如果我们考虑这个mesh 并且我从这个角度投影顶点“在我面前”我会得到these points（或多或少），但我不知道如何连接它们。

我该怎么办？

Answer 1

我建议使用orthogonal projection对纹理进行额外的渲染过程，并在其上创建具有这些纹理的平面。

如果您不需要物体的重要细节，则可以将其材料更改为一些简单的材料。此外，如果您的平面和对象位于同一场景中，您可能希望在使用ortho渲染时使它们不可见。

在three.js中，WebGLRenderTarget可用于渲染纹理，OrthographicCamera用于获取正投影，MeshBasicMaterial可用作简单材质。