ThreeJS：如何删除顶点？

Posted 2023-02-27

【中文标题】ThreeJS：如何删除顶点？

【英文标题】：ThreeJS: How to remove vertices?

【发布时间】：2015-09-18 19:37:46

【问题描述】：

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

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

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，因此甚至不是自定义的。

【问题讨论】：

这个问题可能对 ***.com/questions/15384078/… 有帮助，我猜它是旧的 verticesNeedUpdate 标志？

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

anwser能解决你的问题吗？

【参考方案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。

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

Dynamically Adding Vertices to a Line in Three.js

Adding geometry to a three.js mesh after render

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

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