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

Question

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

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

Answer 1

要绘制这样的形状，您需要按逆时针方向的正确顺序收集点。你的问题是你也在你的网格上画了一个洞。这使它变得更加困难，我不知道如何仅使用 THREE.Geometry 正确地做到这一点。

但我建议看一下 the THREE.Shape class。它允许您绘制带孔的形状，然后可以使用 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 也允许孔和其他更复杂的曲线。我认为这对您的情况很有用。

Answer 2

如类似中所述，我需要在操作过程中将geometry.setDrawRange（索引，顶点数）添加到clear/hide/update个顶点。

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

Clear the vertices in bufferGeometry after decreasing its number (THREE.js)

geometry

buffer

three.js