Generating a Regular Polygon with Three.js

Question

I'm using Three.js to procedurally generate a regular N-gon based on a user-provided number of sides. The long-term goal is to use this as the first step in rendering a polyhedral prism.

I'm using the solution discussed here to calculate the vertices of the N-gon.

I'm then using the technique discussed here to generate faces on the N-gon.

My first attempt to produce the necessary Geometry object resulted in the following, which doesn't seem to render anything after being added to 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 toying with that for too long, I discovered the ShapeGeometry class. This uses the same vertex algorithm as the above example, but this one renders properly after being added to a Mesh:

function createShapeGeometry (n, circumradius) {

    var shape = new THREE.Shape(),
        vertices = [],
        x;

    // Calculate 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)))
        ]);
    }

    // Start at the last vertex.                
    shape.moveTo.apply(shape, vertices[sides - 1]);

    // Connect each vertex to the next in sequential order.
    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's wrong with the Geometry example that's resolved with the ShapeGeometry example?

I don't think it's an issue with camera or positioning because replacing the complex vertex calculations with simpler whole numbers produces a polygon without an issue, provided the values make sense.

The reason I'm asking is because, as I mentioned initially, I'd like to eventually use this as the first step in rendering a polyhedron. ShapeGeometry objects can be extruded to give them depth, but even with the options that Three.js makes available, this may not be enough for my needs in the long run as the required polyhedra become more irregular.

Any thoughts?

Stemkoski · Answer 1 · 2013-08-30T16:45:25.213

You can create prisms using THREE.CylinderGeometry; for an n-sided prism, you could use

// radiusAtTop, radiusAtBottom, height, segmentsAroundRadius, segmentsAlongHeight
var nPrism = new THREE.CylinderGeometry( 30, 30, 80, n, 4 );

You can also use CylinderGeometry to create pyramids and frustums; for more examples of built-in shapes, you can check out:

http://stemkoski.github.io/Three.js/Shapes.html

Since you also sound like you may be interested in more general polyhedra, you might also want to check out:

http://stemkoski.github.io/Three.js/Polyhedra.html

which includes models of the Platonic Solids, Archimedean Solids, Prisms, Antiprisms, and Johnson Solids; however, in that program the polyhedra are "thick" from using spheres for vertices and cylinders for edges.

Hope this helps!

score 2 · Accepted Answer · answered Aug 29 '13 at 16:17

2

Your function works as expected.

Look at this fiddle http://jsfiddle.net/Elephanter/mUah5/

there is a modified threejs fiddle with your createGeometry function

So you have problem in another place, not at createGeometry function

answered Aug 29 '13 at 16:17

Elephant

1,346
10
11

1

Interesting. My post-geometry code is basically the main example from the Three.js "Getting Started" tutorial, so in that sense, it's almost the same as the Fiddle you provided. Changing the constant values to the ones that you used caused my original polygon to appear. Thank you for your assistance. – Eric Aug 29 '13 at 17:45

Generating a Regular Polygon with Three.js

2 Answers2