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
Sie können die Puffergröße nicht ändern. https://github.com/mrdoob/three.js/wiki/Updates – WestLangley