ThreeJS：如何删除顶点？

Question

向three.js网格添加新顶点的方法是通过 mesh.geometry.vertices.push(new THREE.Vector3(x, y, z))，但是如何删除它们呢？

由于“geometry”是一个数组，所以我认为可以使用以下代码来删除顶点:

mesh.geometry.vertices.splice(vertexIndex, 1)

mesh.geometry.verticesNeedUpdate = true;

但是当我这样做时，整个程序会崩溃，并出现三个js内部错误消息，指出：“在three.min.js中未捕获的类型错误:无法读取未定义的属性'x'”。

我在他们的wiki和github问题中搜索，但找不到答案。该网格是一个简单的BoxGeometry，甚至不是自定义的。

- nora

---

可能这个问题可以帮到你：https://dev59.com/EWUp5IYBdhLWcg3wRWFD。我猜测这是老问题了，需要用到`verticesNeedUpdate`标志吧？ - philipp

@philipp：我忘了提到我已经使用了这个标志。问题已经编辑过了。在删除顶点后，场景立即中断。 - nora

这个答案解决了你的问题吗？ - Mouloud85

Answer 1

在three.js中，每个面由3个顶点组成。以下是一个示例，以使其更清晰。以下是在r71中创建几何体的方法：

 geometry=new THREE.Geometry();

 geometry.vertices.push(// few vertices with random coordinates
     new THREE.Vector3(12,15,5),//index:0 -- the numbers are (x,y,z) coordinates
     new THREE.Vector3(10,15,5),//index:1
     new THREE.Vector3(12,10,2),//index:2
     new THREE.Vector3(10,10,2)//index:3
 );

 geometry.faces.push(
     new THREE.Face3(0,1,2),//those numbers are indices of vertices in the previous array
     new THREE.Face3(0,3,2)
 );

 geometry.computeFaceNormals();// we won't care about this here

(I did not care about the values so i do not know which shape it can give) 你可以看到建立了两个数组：顶点和面。每一帧发生的事情是，使用其顶点的位置绘制每个面。 如果在geometry.vertices数组中删除一个顶点，您会问什么出了问题：假设上面的第二个顶点被删除。现在数组看起来像这样：

 geometry.vertices=[
     THREE.Vector3(12,15,5),//index:0
     THREE.Vector3(12,10,2),//new index:1
     THREE.Vector3(10,10,2)//new index:2
 ];

索引3处没有更多的顶点。因此，当GPU绘制下一帧时，如果一个面指向它（这里是第二个面），它将尝试访问其坐标（先是x，然后是y和z）。这就是为什么控制台返回无法读取未定义的x。

这里有一个关于错误的长说明。您可以看到，删除顶点也会使数组移位，因此面不具有正确的形状，它们的法线也不再对应。最糟糕的是缓冲区必须更改，但是根据例如此处的规定，这是不允许的：

在Three.js中动态添加顶点

渲染后向Three.js网格添加几何体

解决方案是使用技巧，如引用所述：修改顶点坐标、隐藏面……这取决于您想要做什么。

如果您的场景没有太多顶点，您还可以删除以前的网格，并创建一个新的网格，其中包含一个没有顶点且具有更正的面数组的新几何体。

- Mouloud85