减少数量后，清除bufferGeometry中的顶点（THREE.js）

Question

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

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

Answer 1

要绘制像这样的形状，您需要以逆时针方向以正确的顺序收集点。您的案例中的问题是您还在网格中绘制了一个洞。这使得它变得更加困难，而且我并不仅仅使用THREE.Geometry确切地知道如何正确地执行此操作。

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

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也允许使用孔和其他更复杂的曲线。我认为这对你的情况很有用。

Answer 2

正如类似question's answer中所提到的，我需要在操作过程中添加geometry.setDrawRange（索引，顶点数）来清除/隐藏/更新顶点。