javascript 在 THREE.js 中为顶点生成网格面
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15795348/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Generate mesh faces for vertices in THREE.js
提问by g1i1ch
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.
我不确定答案是否应该非常明显，但它让我望而却步。我在使用three.js的Udacity上做3D图形类。我现在需要生成 3d 网格。
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;
}
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?
我知道最小面数的基本公式是 n-2。但我只是想不出一种方法来做到这一点而不会出现面孔重叠。我不希望任何人为我做我的工作，我想尽可能地自己弄清楚。但是有没有人可以指出我正确的方向或给我一个公式或其他东西？
采纳答案by gaitat
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.
假设您以凹面方式和逆时针方式生成顶点，那么如果您有 3 条边（三角形），则将顶点 0 与 1 与 2 连接起来。如果您有 4 条边（四边形），则将顶点 0 与 1 与 2 连接起来（第一个三角形），然后顶点 0 与 2 与 3。如果你有 5 条边（五边形），你将顶点 0 与 1 与 2（第一个三角形）连接起来，然后将顶点 0 与 2 与 3（第二个三角形，然后是顶点 0 与 3 与 4）连接起来. 我想你明白这个模式了。
回答by Wilt
You can automate your triangulation
您可以自动进行三角测量
For big polygons it can be quite a job to manually add the faces. You can automate the process of adding faces to the Mesh using the triangulateShapemethod in THREE.Shape.Utilslike this:
对于大多边形，手动添加面可能是一项艰巨的工作。您可以使用如下triangulateShape方法自动将面添加到网格的过程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 );
Where verticesis your array of vertices and with holesyou can define holes in your polygon.
vertices您的顶点数组在哪里，holes您可以在多边形中定义孔。
Note:Be careful, if your polygon is self intersecting it will throw an error. Make sure your vertices array is representing a valid (non intersecting) polygon.
注意：小心，如果你的多边形是自相交的，它会抛出一个错误。确保您的顶点数组表示有效（非相交）多边形。
