如何在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制作额外的渲染通道纹理，然后用这些纹理创建飞机。

如果您不需要对象的材质细节，那么将其材质更改为一些简单的材质是值得的。此外，如果您的飞机和物体处于相同的场景中，则可能需要在使用邻角进行渲染时使其不可见。

In three.js WebGLRenderTarget可以用于渲染纹理，OrthographicCamera用于获得正投影和MeshBasicMaterial作为简单材料。