Question

向three.js网格添加新顶点的方法是 mesh.geometry.vertices.push（new THREE.Vector3（x，y，z）），但如何删除它们？< / p>

＆＃34;几何＆＃34;是一个数组，所以我想，我可以删除顶点：

mesh.geometry.vertices.splice（vertexIndex，1）

mesh.geometry.verticesNeedUpdate = true;

但是，当我这样做时，整个事情打破了三个.js内部错误消息，说：＆＃34; Uncaught TypeError：无法读取属性＆＃39; x＆＃39;未定义＆＃34;在three.min.js内部。

我搜索了他们的维基，他们的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

（我不关心这些值，所以我不知道它能给出哪种形状）

您可以看到构建了两个阵列：顶点和面。现在，每一帧发生的事情是每张脸都被画成了＃39;与顶点的位置。

你可以通过删除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将绘制下一帧时，如果一个面指向它（这里是第二面），它将尝试访问其坐标（在y和z之前的第一个x）。这就是为什么控制台返回它无法读取未定义的x。

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

Dynamically Adding Vertices to a Line in Three.js

Adding geometry to a three.js mesh after render

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

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

ThreeJS：如何删除顶点？

1 个答案: