Three.jsで3Dメッシュを2Dシェイプに「平坦化」する方法

Question

3Dメッシュを2Dシェイプに平坦化しようとしています。私は何を達成しようとしていることは基本的には画像で見るものthis

のようなものである異なる見解に沿って与えられたメッシュとそのシルエットです。私はThree.jsで任意のメッシュに対して同じことをしたいと思いますが、どうやってシルエットを得ることができるのか分かりません。

私は2つの可能な解決策を考えた：

1）メッシュをコピーし、私は私が見る形のシルエットから見て取得したい場合、それは、例えば（平坦化を受けるように、与えられた軸に沿って、それを拡張負の正のZが、私は単純に、このようにそれを拡張したい：

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

問題：私はコピーして潜在的に非常に大きくなる可能性メッシュを再描画しています、それは非常に効率的ではありませんので、

2）。メッシュの頂点を2D平面に投影します。すべて同じレベルで行い、次に頂点間に線を作成します。

問題：次のように入れて、私は頂点が顔のように接続されている方法についての情報を失うので、それは、全く動作しません。結果として生じる形状は、頂点がどのように投影されるかに完全に依存します。例えば

、我々はその観点からこのmesh 、私は「私の前に」頂点をプロジェクトを検討する場合、私はthese points（多かれ少なかれ）を得るだろうが、私はそれらを接続する方法を知ることはできません。

どうすればよいですか？

Answer 1

私はorthogonal projectionでテクスチャに追加レンダーパスを作成し、それらの上にこれらのテクスチャを持つ平面を作成することをお勧めします。あなたがオブジェクトのマテリアルの詳細を必要としない場合は

いくつかの簡単な材料にその材料を変更する価値があります。また、プレーンとオブジェクトが同じシーンにある場合は、オルソでレンダリングすると非表示にすることもできます。

テクスチャレンダリングには、WebGLRenderTargetを使用できます。オルソ投影を取得する場合はOrthographicCamera、単純な素材の場合はMeshBasicMaterialです。