在THREE.js中为顶点生成网格面 [英] Generate mesh faces for vertices in THREE.js

问题描述

我不确定答案是否应该是令人目眩的明显，但它让我望而却步。我在Udacity上使用three.js做3D Graphics类。我正处于需要生成3d网格的位置。

I'm not sure if the answer is supposed to be blindingly obvious but it eludes me. I'm doing the 3D Graphics class on Udacity that uses three.js. I'm at a point where I'm required to generate a 3d mesh.

我已经正确地生成了顶点，但是我坚持为它们生成面。我想不出一种自动生成不重叠的面的明显方法。我在网上搜索和搜索，但我找不到任何有关它的信息。我不确定这是不是很明显或者没有记录。这是代码：

I've got the vertices all generating correctly, but I'm stuck at generating faces for them. I can't think of an obvious way to auto generate faces that don't overlap. I've searched and searched around the web but I can't find any information about it. I'm not sure if it's something stupidly obvious or just not very documented. Here's the code:

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。但是我没想到没有面部重叠的方法。 我不希望任何人为我做我的工作，我想尽可能多地弄清楚自己。但有没有人可以指出我正确的方向或给我一个公式或什么？

I know the basic formula for the minimum number of faces is n-2. But I just can't think of a way to do this without faces overlapping. I don't want anyone to do my work for me, I want to figure it out myself as much as I can. But is there anyone who can point me in the right direction or give me a formula or something?

推荐答案

假设你是以凹面方式和逆时针方式生成顶点然后如果你有3个边（三角形）你连接顶点0和1连接2.如果你有4边（四边形）你连接顶点0与1与2（第一个）三角形，然后是顶点0，其中2为3.如果有5个边（五边形），则将顶点0与1连接为2（第一个三角形），然后将顶点0与2连接为3（第二个三角形，然后是顶点0，其中3为4。我认为你得到的模式。

Assuming you are generating your vertices in a concave fashion and in a counterclockwise manner then if you have 3 sides (triangle) you connect vertex 0 with 1 with 2. If you have 4 sides (quad) you connect vertex 0 with 1 with 2 (first triangle) and then vertex 0 with 2 with 3. If you have 5 sides (pentagon) you connect vertex 0 with 1 with 2 (first triangle) then vertex 0 with 2 with 3 (second triangle and then vertex 0 with 3 with 4. I think you get the pattern.

这篇关于在THREE.js中为顶点生成网格面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！