Three.jsのBufferGeometryから頂点とその属性を削除する

Question

大きなThree.js Points（以前はPointCloud）オブジェクトがあります。本質的には多くの異なる点群フォームがすべてPointsオブジェクトに入れられているので、WebGLRenderer内の単一のBufferGeometryで効率的にレンダリングできます。

私のプログラムはインタラクティブで、ユーザーは消える点群フォームを選択して新しい点群に置き換えることができます。これを行うために、私は各頂点に割り当てたID番号をループし、ビューアーが選択したフォームに関連付けられた頂点を探します。フォームの頂点にstartIndexとendIndexを記録し、BufferGeometryの各属性配列の要素の範囲をスライスします。次に、グラフィックカードへの更新の属性にタグを付けます。

インデックス値が正しいことを検証しました。まず、単純な色の変更を行ってから、配列を編集します。残念ながら、いったん配列を編集すると、その動作は本当に不安定になり、グリッド内に配置されたフォームは、画面から左から右に向かってパッチ状に後退して見えるようになります。私がしたいことは、選択されるごとに各フォームが消えることです。グラフィックスカードにアップロードされた位置の配列は固定長ですか？それともダイナミックですか？私は数日間、これに対する解決策について疑問を抱かせてきました。

プログラムはかなり複雑であるので、私は、私は以下の問題領域だと思うものを抜粋しました：

function extractFormFromTypedArray(startIndex, endIndex, itemSize, typedArray) { 
    // The startIndex and endIndex are the range of points to remove in order to delete the form the viewer has selected 
    // startIndex is inclusive, end index in non-inclusive 
    var deleteCount = (endIndex * itemSize) - (startIndex * itemSize); 
    var regularArray = Array.from(typedArray); 
    regularArray.splice(startIndex, deleteCount); // regular array now contains only the unselected motifs' values 
    var newEditedTypedArray = new Float32Array(regularArray); 
    return newEditedTypedArray; 
} 

function swapForm(formID) { 

    var targetFormIndexes = findForm(formID); 

    var positionArray = gridOfForms.geometry.getAttribute('position'); 
    positionArray.array = extractFormFromTypedArray(targetMotifIndexes.startIndex, targetMotifIndexes.endIndex, 3, positionArray.array); 

    var attribute1Array = gridOfForms.geometry.getAttribute('attribute1'); 
    attribute1Array.array = extractFormFromTypedArray(targetMotifIndexes.startIndex, targetMotifIndexes.endIndex, 1, attribute1Array.array); 

    var attribute2Array = gridOfForms.geometry.getAttribute('attribute2'); 
    attribute2Array.array = extractMotifFromTypedArray(targetMotifIndexes.startIndex, targetMotifIndexes.endIndex, 1, attribute2Array.array); 

    gridOfForms.geometry.attributes.position.needsUpdate = true; 
    gridOfForms.geometry.attributes.attribute1.needsUpdate = true; 
    gridOfForms.geometry.attributes.attribute2.needsUpdate = true; 
} 

Three.js V74は、@ WestLangleyさんのコメントに

Answer 1

おかげで私は今何が起こっているのを知っています。バッファは、一度実装されると固定長であるため、新しい値で更新できますが、それ以上の値の追加や削除はできません。基本的に、これは非常に高価である（

あなただけのバッファの内容を更新することができ、あなたがバッファに のサイズを変更することはできません。linkによると、彼は私が何をするかと思われるバッファの編集を、エミュレートするためのオプションを持っている提供しました新しいジオメトリの作成と同じです）。

大きなバッファをあらかじめ割り当ててからサイズ変更をエミュレートすると、不要な頂点を折りたたみ隠すことができます（ ）。

更新する必要がある属性のフラグのみを設定します。更新は、 になります。バッファーが変更されると、これらのフラグは自動的に falseにリセットされます。 バッファを更新したままにするには、それらをtrueに設定しておく必要があります。

ありがとう!!