Implement a simple star.

src/open.js

@@ -3,7 +3,7 @@ import * as THREE from "three";
 import './open.scss';
 
 let scene, camera, renderer;
-let cube;
+let star;
 
 function startOpenAnimation() {
     scene = new THREE.Scene();
@@ -14,22 +14,45 @@ function startOpenAnimation() {
     renderer.setSize(window.innerWidth, window.innerHeight);
     document.body.appendChild(renderer.domElement);
 
-
+    let geometry = new THREE.BufferGeometry();
-    // Initialize sample cube.
+    let vertices = starCoordinates(2/3, 1, 0);
-    let geometry = new THREE.BoxGeometry(1, 1, 1);
+    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-    console.log(geometry);
+    let material = new THREE.LineBasicMaterial({color: 0x00ff00});
-    let material = new THREE.MeshBasicMaterial({color: 0x00ff00});
+    star = new THREE.Line(geometry, material);
-    cube = new THREE.Mesh(geometry, material);
+    scene.add(star);
-    scene.add(cube);
 
     requestAnimationFrame(animate)
 }
 
+/**
+ * Generate the outer points of an N pointed star.
+ *
+ * @param innerRadius
+ * @param outerRadius
+ * @param z
+ * @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 ;
+        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;
+        buf[offset + 4] = Math.cos(STAR_SLICE * (i + 0.5)) * innerRadius;
+        buf[offset + 5] = buf[offset + 2] = z;
+    }
+
+    return buf;
+}
+
 function animate() {
     requestAnimationFrame(animate);
 
-    cube.rotation.x += 0.01;
+    star.rotation.z += 0.01;
-    cube.rotation.y += 0.01;
 
     renderer.render(scene, camera);
 }