如何在 Three.js 中将 3D 网格“展平”为 2D 形状

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 对纹理进行额外的渲染通道，并创建带有这些纹理的平面。

如果您不需要对象的材质细节，则值得将其材质更改为一些简单的材质。此外，如果您的平面和对象在同一个场景中，您可能希望在使用正交渲染时使它们不可见。

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