ThreeJS：如何删除顶点？

Question

向 three.js 网格添加新顶点的步骤是 mesh.geometry.vertices.push(new THREE.Vector3(x, y, z))，但是怎么做我删除它们？

“几何”是一个数组，所以我想，我可以删除顶点：

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

mesh.geometry.verticesNeedUpdate = true;

但是，当我这样做时，整个事情都因 three.js 内部错误消息而中断：“Uncaught TypeError: Cannot read 属性 'x' of undefined” inside three.min.js.

我搜索了他们的 wiki，他们的 github 问题。并且无法找到答案。网格是一个简单的 BoxGeometry，因此甚至不是自定义的。

Answer 1

在 threejs 中，每个面由 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

（我不关心数值所以我不知道它能给出什么形状）

您可以看到构建了两个数组：vertices 和 faces。现在在每一帧发生的是每个面都是 'drawed' 及其顶点的位置。

你问删除 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 之前).这就是为什么控制台 returns 无法读取 x of undefined.

这是对错误的详细解释。您可以看到顶点删除也移动了数组，因此面没有正确的形状，并且它们的法线不再对应。最糟糕的是缓冲区将不得不改变，这是不允许的，例如：

Dynamically Adding Vertices to a Line in Three.js

Adding geometry to a three.js mesh after render

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

如果您的场景没有太多顶点，您还可以删除以前的网格并创建一个具有新几何体的新网格，没有一个顶点并具有更正的面阵列。

ThreeJS：如何删除顶点？

ThreeJS: How to remove vertices?

javascript

mesh

vertices

three.js