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

Answer 1

感谢@ WestLangley的评论我现在知道发生了什么。缓冲区一旦实现就会固定长度，这意味着它们可以使用新值进行更新，但不能添加或删除更多值。根据他提供的link，我确实可以选择模拟缓冲区编辑，这可能就是我要做的：

您只能更新缓冲区的内容，无法调整缓冲区的大小   （这非常昂贵，基本上相当于创建新几何体。）

您可以通过预先分配更大的缓冲区来模拟调整大小   保持不需要的顶点折叠/隐藏。

仅为需要更新的属性设置标志，更新是   昂贵。缓冲区更改后，这些标志会自动重置为   假。如果你想保留，你需要将它们设置为真   更新缓冲区。

谢谢！

从Three.js中的BufferGeometry中删除顶点及其属性

1 个答案: