2016-04-01 9 views
0

Ich habe ein großes Three.js Points (früher PointCloud) Objekt. Es sind im Wesentlichen viele verschiedene Punktwolkenformen, die alle in ein einziges Points Objekt eingefügt werden, so dass ich es effizient mit einem einzelnen BufferGeometry in einem WebGLRenderer rendern kann.Vertices und ihre Attribute aus einer BufferGeometry in Three.js entfernen

Mein Programm ist interaktiv, und ein Benutzer kann eine Punktwolkenform auswählen, die verschwindet, um durch eine neue Punktwolke ersetzt zu werden. Um dies zu tun, durchlaufe ich die ID-Nummer, die ich jedem Knoten zugewiesen habe, und suche nach den Scheitelpunkten, die dem Formular zugeordnet sind, das der Betrachter ausgewählt hat. Ich logge dann die startIndex und endIndex für die Scheitelpunkte des Formulars ein und zerschneide diese Elementspanne von jedem der Attributarrays in BufferGeometry. Ich kennzeichne dann die Attribute für ein Update der Grafikkarte.

Ich habe bestätigt, dass die Indexwerte korrekt sind, indem Sie zuerst eine einfache Farbänderung durchführen, bevor Sie mit der Bearbeitung der Arrays fortfahren. Leider, sobald ich die Arrays bearbeite, ist das Verhalten wirklich unberechenbar und die Formen, die in einem Raster angeordnet sind, scheinen sich von dem Bildschirm von links nach rechts in einer lückenhaften Weise zurückzuziehen. Was ich will, ist, dass jedes Formular verschwindet, wie es ausgewählt ist. Hat das Array von Positionen eine feste Länge, nachdem es auf die Grafikkarte hochgeladen wurde? Oder ist es dynamisch? Seit einigen Tagen habe ich über Lösungen nachgedacht.

Das Programm ist ziemlich komplex, also habe ich exzerpiert, was ich denke, die Problembereiche unten sind:

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

+0

Sie können die Puffergröße nicht ändern. https://github.com/mrdoob/three.js/wiki/Updates – WestLangley

Antwort

1

Dank @ WestLangley Kommentar ich jetzt weiß, was los ist . Die Puffer haben eine feste Länge, sobald sie implementiert sind, was bedeutet, dass sie mit neuen Werten aktualisiert werden können, aber keine weiteren Werte hinzugefügt oder gelöscht werden können. Nach dem link er bot ich eine Option Puffer Bearbeitung zu emulieren, was wahrscheinlich ist, was ich tun werde:

können Sie nur den Inhalt der Puffer aktualisieren, können Sie nicht die Größe Puffer (dies sehr kostspielig ist, im Grunde entspricht dem Erstellen neuer Geometrie).

Sie können die Größenanpassung emulieren, indem Sie einen größeren Puffer vorab zuweisen und dann nicht benötigte Vertices ein-/ausblenden.

Setzen Sie Flags nur für Attribute, die Sie aktualisieren müssen, Updates sind teuer. Sobald sich die Puffer ändern, werden diese Flags automatisch auf false zurückgesetzt. Sie müssen sie weiterhin auf "True" setzen, wenn Sie die Puffer aktualisieren wollen.

Danke !!

Verwandte Themen