[英]Generate mesh faces for vertices in THREE.js
我不确定答案是否应该是令人目眩的明显,但它让我望而却步。 我在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。 但是我没想到没有面部重叠的方法。 我不希望任何人为我做我的工作,我想尽可能多地弄清楚自己。 但有没有人可以指出我正确的方向或给我一个公式或什么?
对于大多边形,手动添加面可能非常重要。 您可以使用THREE.Shape.Utils
的triangulateShape
方法自动执行向Mesh添加面的过程,如下所示:
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
是vertices
数组并且带有holes
,则可以在多边形中定义孔。
注意:请注意,如果多边形是自相交的,则会引发错误。 确保顶点数组表示有效(非交叉)多边形。
假设您以凹面方式和逆时针方式生成顶点,那么如果您有3个边(三角形),则将顶点0与1连接为2.如果有4个边(四边形),则将顶点0与1连接为2(第一个三角形)然后是顶点0和2和3.如果你有5个边(五边形)你连接顶点0和1与2(第一个三角形)然后顶点0连接2和3(第二个三角形然后顶点0和3和4)我认为你得到的模式。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.