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

Question

我不确定答案是否应该是令人目眩的明显,但它让我望而却步.我在Udacity上使用three.js做3D Graphics类.我正处于需要生成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.但是我没想到没有面部重叠的方法.我不希望任何人为我做我的工作,我想尽可能多地弄清楚自己.但有没有人可以指出我正确的方向或给我一个公式或什么？

Answer 1

您可以自动化三角测量

对于大多边形,手动添加面可能非常重要.您可以使用以下triangulateShape方法自动执行向Mesh添加面的过程THREE.Shape.Utils:

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您可以在多边形中定义孔.

注意:请注意,如果多边形是自相交的,则会引发错误.确保顶点数组表示有效(非交叉)多边形.

Answer 2

假设您以凹面方式和逆时针方式生成顶点，那么如果您有 3 条边（三角形），则将顶点 0 与 1 与 2 连接。如果您有 4 条边（四边形），则将顶点 0 与 1 与 2 连接（第一个三角形），然后顶点 0 与 2 与 3。如果有 5 条边（五边形），则将顶点 0 与 1 与 2 连接（第一个三角形），然后将顶点 0 与 2 与 3 连接（第二个三角形，然后将顶点 0 与 3 与 4 连接） .我想你明白了。