如何在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作爲簡單材料。