减少bufferGeometry数(THREE.js)后清除其顶点

Question

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

​

但问题是，当我改变脸的数目，剩余的顶点从以前的几何学保留！例如，在下面的图像中，您可以看到边已经从5减少到4，但是一些来自以前几何学的顶点仍然存在！

​

Answer 1

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

但我建议看一看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还允许洞和其他更复杂的曲线。我认为这对你的情况会有帮助。