javascript - 三个JS : How to remove vertices?

Question

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

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

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

mesh.geometry.verticesNeedUpdate = true;

但是当我这样做时，three.js 内部错误消息会破坏整个事情:“Uncaught TypeError: Cannot read property '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。现在在每一帧发生的是每张脸都用它的顶点位置“绘制”。

你问删除 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 of undefined 的原因。

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

Dynamically Adding Vertices to a Line in Three.js

Adding geometry to a three.js mesh after render

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

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