减少数量后，清除bufferGeometry中的顶点（THREE.js）(Clear the vertices in bufferGeometry after decreasing its numbe

减少数量后，清除bufferGeometry中的顶点（THREE.js）(Clear the vertices in bufferGeometry after decreasing its number (THREE.js))

我想要实现的是一个可修改的网格，用户可以使用滑块操作来设置面数。 这是我想要的一个例子：

但问题是，当我更改面数时，前一个几何体的剩余顶点仍然存在！ 例如，在下面的图像中，您可以看到边从5减少到4，但是之前几何体的一些顶点仍然存在！

What I want to achieve is a modifiable mesh that users can manipulate with a slider to set the number of faces. Here is an example of what I want:

but the problem is that when I change the number of faces, the remaining vertices from previous geometry remains! for example, in the image below, you can see that the sides has been reduced to 4 from 5, but some vertices from previous geometry remained!

最满意答案

要绘制这样的形状，您需要以逆时针方向以正确的顺序收集点。 在你的情况下的问题是你也在你的网格中画一个洞。 这使得它变得更加困难，我不知道如何使用THREE.Geometry正确地完成这项工作。

但我建议你看看THREE.Shape课程。 它允许您绘制带孔的形状，然后可以使用makeGeometry()方法将形状转换为几何（ THREE.ShapeGeometry ）。

var shape = new THREE.Shape(); shape.moveTo( 10,10 ) shape.lineTo( 20, 10 ); shape.lineTo( 20, 20 ); shape.lineTo( 10, 20 ); shape.lineTo( 10, 10 ); geometry = shape.makeGeometry(); mesh = new THREE.Mesh( geometry, material ); scene.add( mesh );

THREE.Shape api还允许孔和其他更复杂的曲线。 我认为这对你的情况很有用。

As mentioned in the similar question's answer, I needed to add geometry.setDrawRange(index,number of vertices) to clear/hide/update vertices during the manipulation.