Make animation more exciting.

src/open.js

@@ -4,6 +4,7 @@ const STAR_POINTS = 5;
 
 let scene, camera, renderer;
 let coreStarGroup;
+let rings = [];
 let animation = {
     steps: 0,
     x: new Float32Array(4),
@@ -11,13 +12,18 @@ let animation = {
     z: new Float32Array(4),
 };
 
+/**
+ * Implementation of exponential multi-stage interpolation.
+ *
+ * @param range something array-like filled with numbers
+ * @param factor exponential factor for interpolation.
+ */
 function interpolate(range, factor) {
     for (let i = 1; i < range.length; ++i) {
         range[i] += (range[i - 1] - range[i]) * factor;
     }
 }
 
-
 /**
  * Create a BufferGeometry from vertices and faces.
  *
@@ -67,6 +73,15 @@ function addStar() {
     let ring = new THREE.Mesh(ringGeometry, ringMaterial);
     ring.receiveShadow = ring.castShadow = true;
     coreStarGroup.add(ring);
+
+    for (let i = 0; i < 2; ++i) {
+        let outer = 5 + 2 * i;
+        let inner = 3.5 + 1.5 * i;
+        let ring = new THREE.Mesh(generateStarRing(inner, outer, 0.4), ringMaterial);
+        ring.castShadow = ring.receiveShadow = true;
+        scene.add(ring);
+        rings.push(ring);
+    }
 }
 
 /**
@@ -97,6 +112,8 @@ function generateStarRing(innerRadius, outerRadius, size) {
         starCoordinates(innerRadius - 0.5 * size, outerRadius - 0.5 * size, 0.5 * size),
         starCoordinates(innerRadius - 0.5 * size, outerRadius - 0.5 * size, -0.5 * size),
     ];
+
+    // TODO: remove duplicate vertices.
     let vertices = concatFloat32Array(
         vertexCandidates[0],
         vertexCandidates[1],
@@ -107,7 +124,6 @@ function generateStarRing(innerRadius, outerRadius, size) {
         vertexCandidates[3],
         vertexCandidates[0],
     );
-    console.log(vertices);
 
     const faces = new Array(2 * STAR_POINTS * 3 * 4);
     for (let i = 0; i < 4; ++i) {
@@ -124,8 +140,8 @@ function generateStarRing(innerRadius, outerRadius, size) {
 
 function startOpenAnimation() {
     scene = new THREE.Scene();
-    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    camera.position.z = 5;
+    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 0.1, 1000);
+    camera.position.z = 10;
 
     renderer = new THREE.WebGLRenderer({
         antialias: true,
@@ -263,6 +279,11 @@ function animate() {
     coreStarGroup.rotation.y = animation.y.last();
     coreStarGroup.rotation.z = animation.z.last();
 
+    for (let i = 0; i < rings.length; ++i) {
+        let sign = 2 * (i % 2) - 1;
+        rings[i].rotation.y += sign * 0.05;
+    }
+
     renderer.render(scene, camera);
 }