javascript - ラインとメッシュの両方に THREE.BufferGeometry インスタンスを再利用します

Question

バッファ ジオメトリを最大限に活用する方法を学んでいます。それらがどのように機能しているのか、そしてさまざまな可能性が何であるかをゆっくりと理解し始めています.

しかし今、私は輪郭のあるメッシュが欲しいです:

     3------------------------------------------------2
     /                                                 \
    /                                                   \
   /                                                     \
  /                                                       \
 0---------------------------------------------------------1

メッシュを取得するには、2 つの面( 0, 1, 2 )とを定義する必要があります( 0, 2, 3 )。したがって、このメッシュを描画するには、インデックス配列は次のようになります。

var indices = [ 0, 1, 2, 0, 2, 3 ];

しかし、アウトラインを描画するには、ポイントを順番に接続する必要がある(0, 1, 2, 3, 0)ため、ライン インデックス配列は次のようになります。

var indices = [0, 1, 2, 3, 0];

THREE.BufferGeometryしかし、インデックス配列をインスタンスに定義できるのは 1 回だけです。したがって、両方を描画するには、ジオメトリを複製し、一度 に接続し、Mesh一度 として追加する必要がありLineます。これは、すべての位置が 2 回保存されることを意味します。

同じバッファ ジオメトリを使用して線とメッシュの両方を描画することはできませんか? どういうわけか、2 つのインデックス配列を渡すか、たとえば、それらを 1 つに結合して、この質問でここで述べたようにオフセットを使用します。

私のフィドルを見ることができるので、これはうまくいきます