I'm currently utilizing Three.js to procedurally create a regular N-sided polygon based on a user-input number of sides. The ultimate objective is to use this as the initial phase in displaying a polyhedral prism.
To determine the vertices of the N-gon, I am following the method outlined here.
Subsequently, I am employing the approach discussed here to form faces on the N-gon.
My initial endeavor to construct the required Geometry object yielded unsatisfactory results, as it does not seem to render anything once incorporated into a Mesh:
function createGeometry (n, circumradius) {
var geometry = new THREE.Geometry(),
vertices = [],
faces = [],
x;
// Generate the vertices of the n-gon.
for (x = 1; x <= n; x++) {
geometry.vertices.push(new THREE.Vector3(
circumradius * Math.sin((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
circumradius * Math.cos((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
0
));
}
// Generate the faces of the n-gon.
for (x = 0; x < n-2; x++) {
geometry.faces.push(new THREE.Face3(0, x + 1, x + 2));
}
geometry.computeBoundingSphere();
return geometry;
}
After struggling with that implementation for an extended period, I came across the ShapeGeometry class. This utilizes the same vertex algorithm as the previous example, but this time renders correctly when added to a Mesh:
function createShapeGeometry (n, circumradius) {
var shape = new THREE.Shape(),
vertices = [],
x;
// Determine the vertices of the n-gon.
for (x = 1; x <= sides; x++) {
vertices.push([
circumradius * Math.sin((Math.PI / n) + (x * ((2 * Math.PI)/ n))),
circumradius * Math.cos((Math.PI / n) + (x * ((2 * Math.PI)/ n)))
]);
}
// Begin at the final vertex.
shape.moveTo.apply(shape, vertices[sides - 1]);
// Connect each vertex to the subsequent one sequentially.
for (x = 0; x < n; x++) {
shape.lineTo.apply(shape, vertices[x]);
}
// It's shape and bake... and I helped!
return new THREE.ShapeGeometry(shape);
}
What issues present in the Geometry example are resolved by the ShapeGeometry example?
I don't believe it pertains to camera or positioning since substituting the intricate vertex computations with straightforward whole numbers yields a polygon without difficulty, provided the values are logical.
I'm inquiring because, as stated earlier, my intention is to eventually employ this process to render a polyhedron. While ShapeGeometry objects can be extruded to add depth, even with the array of options offered by Three.js, this may fall short of meeting my requirements as the desired polyhedra become more irregular.
Any insights?