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

问题描述

我不确定答案是否应该非常明显，但它让我望而却步.我在使用three.js的Udacity上做3D图形类.我现在需要生成 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屋！