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

How to "flatten" a 3D mesh into a 2D shape in Three.js

本文关键字：展平形状 2D 网格 3D Three js 中将更新时间：2023-09-26

我正在尝试将 3D 网格展平成 2D 形状。我想要实现的是这样的目标

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

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

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

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

问题：我正在复制和重绘一个可能非常大的网格，所以效率不高。

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

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

例如，如果我们考虑这个网格我从这个角度投影"在我面前"的顶点，我会得到这些点（或多或少），但我不知道如何连接它们。

我应该怎么做？

我建议对具有正交投影的纹理进行额外的渲染通道，并创建带有这些纹理的平面。

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

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