在THREE.js中为顶点生成网格面

Question

我不确定答案是否显而易见，但这让我困扰。我正在做Udacity上使用three.js的3D图形课程。我需要生成一个三维网格，但我卡在了生成面部分。我无法想到一种明显的自动生成不重叠面的方法。我搜索了很多网络资源，但没找到相关信息。我不知道是我太蠢看不出来还是这个问题没有被记录下来。以下是代码:

function PolygonGeometry(sides) {
    var geo = new THREE.Geometry();

    // generate vertices
    for ( var pt = 0 ; pt < sides; pt++ )
    {
        // Add 90 degrees so we start at +Y axis, rotate counterclockwise around
        var angle = (Math.PI/2) + (pt / sides) * 2 * Math.PI;

        var x = Math.cos( angle );
        var y = Math.sin( angle );

        // YOUR CODE HERE
        //Save the vertex location - fill in the code
        geo.vertices.push( new THREE.Vector3(x, y, 0) );
    }
    // YOUR CODE HERE
    // Write the code to generate minimum number of faces for the polygon.


    // Return the geometry object
    return geo;
}

我知道计算最少面数的基本公式是n-2。但是我无法想出一种不重叠的方式来做到这一点。 我不希望有人替我完成工作，我想尽可能自己解决问题。但是否有人可以指点我正确的方向或给我一个公式之类的东西呢？

- g1i1ch

Answer 1

您可以自动化三角剖分

对于大型多边形而言，手动添加面可能是一项相当繁琐的工作。您可以使用THREE.Shape.Utils中的triangulateShape方法自动将面添加到网格中，示例如下：

var vertices = [your vertices array]
var holes = [];
var triangles, mesh;
var geometry = new THREE.Geometry();
var material = new THREE.MeshBasicMaterial();

geometry.vertices = vertices;

triangles = THREE.Shape.Utils.triangulateShape ( vertices, holes );

for( var i = 0; i < triangles.length; i++ ){

    geometry.faces.push( new THREE.Face3( triangles[i][0], triangles[i][1], triangles[i][2] ));

}

mesh = new THREE.Mesh( geometry, material );

其中vertices是您的顶点数组，holes可用于定义多边形中的孔。

注意: 如果您的多边形自相交，它将抛出错误。确保您的顶点数组表示一个有效（非相交）的多边形。

- Wilt

---

注意：从r82版本开始，使用THREE.ShapeUtils.triangulateShape()函数进行三角剖分。 - Avatar

请注意不要遇到“THREE.ShapeUtils：无法在triangulate（）中三角化多边形！”问题，请参见https://dev59.com/kXHYa4cB1Zd3GeqPJkUe获取详细信息。 - Avatar

Answer 2

假设您以凹形并按逆时针方式生成顶点，那么如果有3个面（三角形），则将顶点0与1连接到2。如果有4个面（四边形），则将顶点0与1连接到2（第一个三角形），然后将顶点0与2连接到3。如果有5个面（五边形），则将顶点0与1连接到2（第一个三角形），然后将顶点0与2连接到3（第二个三角形），然后将顶点0与3连接到4。我认为您已经掌握了规律。

- gaitat

---

所以基本上就是制作一个风扇？我想我只是过度思考了这个问题哈哈。谢谢！ - g1i1ch