title: Generating a Regular Polygon with Three.js
body: <p>I'm using Three.js to procedurally generate a regular <em>N</em>-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.</p>
  
  <p>I'm using the solution discussed <a href="https://groups.google.com/forum/#!starred/geometry.puzzles/JI8-u7qFYsw" rel="nofollow noreferrer">here</a> to calculate the vertices of the <em>N</em>-gon.</p>
  
  <p>I'm then using the technique discussed <a href="https://stackoverflow.com/questions/15795348/generate-mesh-faces-for-vertices-in-three-js">here</a> to generate faces on the <em>N</em>-gon.</p>
  
  <p>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:</p>
  
  <pre><code>function createGeometry (n, circumradius) {
  
      var geometry = new THREE.Geometry(),
          vertices = [],
          faces = [],
          x;
  
      // Generate the vertices of the n-gon.
      for (x = 1; x &lt;= 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 &lt; n-2; x++) {
          geometry.faces.push(new THREE.Face3(0, x + 1, x + 2));
      }
  
      geometry.computeBoundingSphere();
  
      return geometry;
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>function createShapeGeometry (n, circumradius) {
  
      var shape = new THREE.Shape(),
          vertices = [],
          x;
  
      // Calculate the vertices of the n-gon.                 
      for (x = 1; x &lt;= 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 &lt; n; x++) {
          shape.lineTo.apply(shape, vertices[x]);
      }
  
      // It's shape and bake... and I helped!         
      return new THREE.ShapeGeometry(shape);
  }
  </code></pre>
  
  <p>What's wrong with the Geometry example that's resolved with the ShapeGeometry example?</p>
  
  <p>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.</p>
  
  <p>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.</p>
  
  <p>Any thoughts?</p>