make all lights move in stats-world

src/components/World/World.js

@@ -1,7 +1,7 @@
 // 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, SpotLightHelper } from "three";
+import { SpotLight } from "three";
 import * as TWEEN from "@tweenjs/tween.js";
 
 import { createCamera } from "./components/camera.js";
@@ -24,10 +24,16 @@ const PLATFORM_BORDER = 10;
 const PLATFORM_EDGE_FOR_UNKNOWNS = 10;
 const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
 
+function createLight() {
+  const light = new SpotLight(0xffffff, 100, 0, Math.PI / 8, 0.5, 0);
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  light.tick = () => {};
+  return light;
+}
+
 class World {
   constructor(container) {
     this.update = this.update.bind(this);
-    this.renderLight = this.renderLight.bind(this);
 
     // Instances of camera, scene, and renderer
     this.camera = createCamera();
@@ -35,9 +41,9 @@ class World {
     this.renderer = createRenderer();
 
     this.light = null;
-    this.helper = null;
+    this.lights = [];
 
-    // Initializate Loop
+    // Initializae Loop
     this.loop = new Loop(this.camera, this.scene, this.renderer);
 
     container.append(this.renderer.domElement);
@@ -69,7 +75,6 @@ class World {
     this.loadClaims();
 
     requestAnimationFrame(this.update);
-    requestAnimationFrame(this.renderLight);
 
     // Responsive handler
     const resizer = new Resizer(container, this.camera, this.renderer);
@@ -80,6 +85,10 @@ class World {
 
   update(time) {
     TWEEN.update(time);
+    this.lights.forEach((light) => {
+      light.updateMatrixWorld();
+      light.target.updateMatrixWorld();
+    });
     requestAnimationFrame(this.update);
   }
 
@@ -107,13 +116,20 @@ class World {
             z
           );
 
-          this.light = new SpotLight(0xffffff, 100, 0, Math.PI / 32, 0.5, 0);
+          const light = createLight();
-          this.light.position.set(x, 20, z);
+          light.position.set(x, 20, z);
-          this.light.target.position.set(x, 0, z);
+          light.target.position.set(x, 0, z);
-          this.scene.add(this.light);
+          this.loop.updatables.push(light);
-
+          this.scene.add(light);
-          this.helper = new SpotLightHelper(this.light);
+          this.scene.add(light.target);
-          this.scene.add(this.helper);
+          new TWEEN.Tween(light.position)
+            .to({ y: 5 }, 1000)
+            .start()
+            .onComplete(() => {
+              this.scene.remove(light);
+              light.dispose();
+            });
+          this.lights = [...this.lights, light];
         });
         console.log("done adding cube");
       } else {
@@ -136,37 +152,6 @@ class World {
     }
   }
 
-  renderLight(time) {
-    time *= 0.001; // convert time to seconds
-
-    if (!this.light && Math.round(time) % 2 === 0) {
-      //const xPos = Math.random() * 100;
-      //const yPos = Math.random() * 100;
-      this.light = new SpotLight(0xffffff, 100, 0, Math.PI / 32, 0.5, 0);
-      this.light.position.set(0, 20, 0);
-      this.light.target.position.set(-5, 0, 0);
-      this.scene.add(this.light);
-      //this.scene.add(this.light.target);
-
-      this.helper = new SpotLightHelper(this.light);
-      this.scene.add(this.helper);
-
-      console.log("added light");
-    } else if (Math.round(time) % 2 != 0 && this.light) {
-      this.scene.remove(this.light);
-      this.light.dispose();
-      this.light = null;
-      this.scene.remove(this.helper);
-      this.helper.dispose();
-      this.helper = null;
-      console.log("disposed light");
-    }
-
-    this.renderer.render(this.scene, this.camera);
-
-    requestAnimationFrame(this.renderLight);
-  }
-
   render() {
     // draw a single frame
     this.renderer.render(this.scene, this.camera);