Fill the star.

src/open.js

@@ -2,6 +2,8 @@ import * as THREE from "three";
 
 import './open.scss';
 
+const STAR_POINTS = 5;
+
 let scene, camera, renderer;
 let star;
 
@@ -15,15 +17,44 @@ function startOpenAnimation() {
     document.body.appendChild(renderer.domElement);
 
     let geometry = new THREE.BufferGeometry();
-    let vertices = starCoordinates(2/3, 1, 0);
+    let vertices = starCoordinates(2 / 3, 1, 0);
     geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-    let material = new THREE.LineBasicMaterial({color: 0x00ff00});
+    geometry.setIndex(filledStarIndices());
-    star = new THREE.Line(geometry, material);
+    let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+    material.side = THREE.DoubleSide;
+    star = new THREE.Mesh(geometry, material);
     scene.add(star);
 
     requestAnimationFrame(animate)
 }
 
+/**
+ * Construct the vertex indices needed to create a filled star.
+ * @returns {Number[]}
+ */
+function filledStarIndices() {
+    const buf = Array(2 * STAR_POINTS * 3);
+    const TOTAL_VERTICES = 2 * STAR_POINTS;
+
+    // First, the "points" of the star.
+    for (let i = 0; i < STAR_POINTS; ++i) {
+        const offset = 3 * i;
+        buf[offset] = 2 * i;
+        buf[offset + 1] = 2 * i + 1;
+        buf[offset + 2] = (2 * i + TOTAL_VERTICES - 1) % (TOTAL_VERTICES);
+    }
+
+    // Then, the inner part, constructed from opposing triangles.
+    for (let i = 0; i < STAR_POINTS; ++i) {
+        const offset = 3 * (STAR_POINTS + i);
+        buf[offset] = 2 * i + 1;
+        buf[offset + 1] = (2 * i + 3) % TOTAL_VERTICES;
+        buf[offset + 2] = (2 * i + 3 + 2 * Math.floor(STAR_POINTS / 2)) % (TOTAL_VERTICES);
+    }
+
+    return buf;
+}
+
 /**
  * Generate the outer points of an N pointed star.
  *
@@ -33,12 +64,11 @@ function startOpenAnimation() {
  * @returns {Float32Array}
  */
 function starCoordinates(innerRadius, outerRadius, z) {
-    const STAR_POINTS = 5;
     const buf = new Float32Array(3 * STAR_POINTS * 2);
     const STAR_SLICE = 2 * Math.PI / STAR_POINTS;
 
     for (let i = 0; i < STAR_POINTS; ++i) {
-        const offset = 3 * 2 * i ;
+        const offset = 3 * 2 * i;
         buf[offset + 0] = Math.sin(STAR_SLICE * i) * outerRadius;
         buf[offset + 1] = Math.cos(STAR_SLICE * i) * outerRadius;
         buf[offset + 3] = Math.sin(STAR_SLICE * (i + 0.5)) * innerRadius;
@@ -53,6 +83,7 @@ function animate() {
     requestAnimationFrame(animate);
 
     star.rotation.z += 0.01;
+    star.rotation.y += 0.01;
 
     renderer.render(scene, camera);
 }