load stats-world bushes and make 'em grow!

src/components/World/World.js

@@ -1,8 +1,10 @@
 // from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80
 
-import axios from "axios";
-import { SpotLight } from "three";
 import * as TWEEN from "@tweenjs/tween.js";
+import axios from "axios";
+import * as THREE from "three";
+import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
+import * as SkeletonUtils from "three/addons/utils/SkeletonUtils.js";
 
 import { AppString } from "@/constants/app";
 import { createCamera } from "./components/camera.js";
@@ -14,16 +16,16 @@ import { Resizer } from "./systems/Resizer.js";
 import { createControls } from "./systems/controls.js";
 import { createRenderer } from "./systems/renderer.js";
 
-const ANIMATION_DURATION_SECS = 10;
+const ANIMATION_DURATION_SECS = 20;
 const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
-const COLOR1 = "#42b883";
+const COLOR1 = "#dddddd";
 const COLOR2 = "#0055aa";
 const PLATFORM_BORDER = 10;
 const PLATFORM_EDGE_FOR_UNKNOWNS = 10;
 const PLATFORM_SIZE = 100;
 
 function createLight() {
-  const light = new SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0);
+  const light = new THREE.SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0);
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   light.tick = () => {};
   return light;
@@ -38,8 +40,12 @@ class World {
     this.scene = createScene(COLOR2);
     this.renderer = createRenderer();
 
+    // necessary for models, says https://threejs.org/docs/index.html#examples/en/loaders/GLTFLoader
+    this.renderer.outputColorSpace = THREE.SRGBColorSpace;
+
     this.light = null;
     this.lights = [];
+    this.bushes = [];
 
     // Initializae Loop
     this.loop = new Loop(this.camera, this.scene, this.renderer);
@@ -82,6 +88,9 @@ class World {
       light.updateMatrixWorld();
       light.target.updateMatrixWorld();
     });
+    this.lights.forEach((bush) => {
+      bush.updateMatrixWorld();
+    });
     requestAnimationFrame(this.update);
   }
 
@@ -100,6 +109,50 @@ class World {
         // ratio of animation time to real time
         const fakeRealRatio = (ANIMATION_DURATION_SECS * 1000) / fullTimeMillis;
 
+        // load plant model first because it takes a second
+        const loader = new GLTFLoader();
+        // choose the right plant
+        const modelLoc = "/models/lupine_plant/scene.gltf", // push with pokies
+          modScale = 0.1;
+        //const modelLoc = "/models/round_bush/scene.gltf", // green & pink
+        //  modScale = 1;
+        //const modelLoc = "/models/coreopsis-flower.glb", // 3 flowers
+        //  modScale = 2;
+        //const modelLoc = "/models/a_bush/scene.gltf", // purple leaves
+        //  modScale = 15,
+
+        // eslint-disable-next-line @typescript-eslint/no-this-alias
+        const parentWorld = this;
+        loader.load(
+          modelLoc,
+          function (gltf) {
+            gltf.scene.scale.set(0, 0, 0);
+            for (const claim of resp.data.data) {
+              const newPlant = SkeletonUtils.clone(gltf.scene);
+              const randomness = claim.id.substring(10);
+              const x =
+                (100 * BASE32.indexOf(randomness.substring(0, 1))) / 32 - 50;
+              const z =
+                (100 * BASE32.indexOf(randomness.substring(8, 9))) / 32 - 50;
+              newPlant.position.set(x, 0, z);
+
+              parentWorld.scene.add(newPlant);
+              const timeDelayMillis =
+                fakeRealRatio *
+                (new Date(claim.issuedAt).getTime() - minTimeMillis);
+              new TWEEN.Tween(newPlant.scale)
+                .delay(timeDelayMillis)
+                .to({ x: modScale, y: modScale, z: modScale }, 5000)
+                .start();
+              parentWorld.bushes = [...parentWorld.bushes, newPlant];
+            }
+          },
+          undefined,
+          function (error) {
+            console.error(error);
+          }
+        );
+
         // calculate when lights shine on appearing claim area
         for (const claim of resp.data.data) {
           // claim is a GiveServerRecord (see endorserServer.ts)
@@ -126,7 +179,7 @@ class World {
             .to({ intensity: 100 }, 10)
             .chain(
               new TWEEN.Tween(light.position)
-                .to({ y: 5 }, 1000)
+                .to({ y: 5 }, 5000)
                 .onComplete(() => {
                   this.scene.remove(light);
                   light.dispose();
@@ -135,7 +188,6 @@ class World {
             .start();
           this.lights = [...this.lights, light];
         }
-        console.log("done adding cube");
       } else {
         console.log(
           "Got bad response status & data of",