I'm struggling to find the solution, even though I am working on the 3D Graphics course on Udacity that utilizes three.js. The task at hand is to create a 3D mesh and while I have successfully generated the vertices, I am facing difficulties with generating non-overlapping faces for them. Despite extensive searching online, I haven't been able to locate any helpful information regarding this issue. It's frustrating because I can't tell if the solution is incredibly simple or just not well-documented. The following code snippet illustrates my current roadblock:
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;
}
Although I understand the basic formula for determining the minimum number of faces (n-2), I am unable to implement it successfully without encountering face overlap issues. I prefer to work through challenges independently but would greatly appreciate any guidance or formula suggestions to point me in the right direction.