Fix shadow issues.

src/open.js

@@ -6,25 +6,46 @@ let scene, camera, renderer;
 let group;
 let lights = {};
 
-function addStar() {
+/**
+ *
+ * @param {Float32Array} vertices
+ * @param {number[]} faces
+ * @returns {BufferGeometry}
+ */
+THREE.BufferGeometry.fromVertices = function (vertices, faces) {
     let geometry = new THREE.BufferGeometry();
-    let vertices = starCoordinates(2, 3, 0);
-
     geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-    geometry.setIndex(filledStarIndices());
+    geometry.setIndex(faces);
     geometry.computeVertexNormals();
+    geometry.computeBoundingBox();
+    geometry.computeBoundingSphere();
+
+    return geometry;
+};
+
+function addStar() {
+    let frontGeometry = THREE.BufferGeometry.fromVertices(starCoordinates(2, 3, -0.1), filledStarIndices());
+    let backGeometry = THREE.BufferGeometry.fromVertices(starCoordinates(2, 3, 0.1), filledStarIndices());
+
     let material = new THREE.MeshStandardMaterial({
-        side: THREE.DoubleSide,
+        side: THREE.FrontSide,
         color: 0x00ff00,
         flatShading: true,
     });
+    let backMaterial = material.clone();
+    backMaterial.side = THREE.BackSide;
 
-    let star = new THREE.Mesh(geometry, material);
+    let star = new THREE.Mesh(frontGeometry, material);
     star.receiveShadow = true;
     group.add(star);
 
+    let backStar = new THREE.Mesh(backGeometry, backMaterial);
+    backStar.receiveShadow = true;
+    group.add(backStar);
+
     let ringGeometry = generateStarRing(2, 3, 0.4);
     let ring = new THREE.Mesh(ringGeometry, material);
+    ring.receiveShadow = ring.castShadow = true;
     group.add(ring);
 }
 
@@ -63,8 +84,8 @@ function generateStarRing(innerRadius, outerRadius, size) {
         vertexCandidates[3],
         vertexCandidates[1],
         vertexCandidates[2],
-        vertexCandidates[0],
         vertexCandidates[3],
+        vertexCandidates[0],
     );
     console.log(vertices);
 
@@ -74,15 +95,11 @@ function generateStarRing(innerRadius, outerRadius, size) {
         for (let j = 0; j < 2 * STAR_POINTS; ++j) {
             const nextRow = (j + 1) % (2 * STAR_POINTS);
             faces.push(offset + j, offset + j + 2 * STAR_POINTS, offset + nextRow);
-            faces.push(offset + j + 2 * STAR_POINTS, offset + nextRow, offset + nextRow + 2 * STAR_POINTS);
+            faces.push(offset + j + 2 * STAR_POINTS, offset + nextRow + 2 * STAR_POINTS, offset + nextRow);
         }
     }
 
-    let geometry = new THREE.BufferGeometry();
+    return THREE.BufferGeometry.fromVertices(vertices, faces);
-    geometry.addAttribute('position', new THREE.BufferAttribute(vertices, 3));
-    geometry.setIndex(faces);
-
-    return geometry;
 }
 
 function startOpenAnimation() {