diff --git a/src/components/World/World.js b/src/components/World/World.js index ad5ee86..9246b7c 100644 --- a/src/components/World/World.js +++ b/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); - this.light.position.set(x, 20, z); - this.light.target.position.set(x, 0, z); - this.scene.add(this.light); - - this.helper = new SpotLightHelper(this.light); - this.scene.add(this.helper); + const light = createLight(); + light.position.set(x, 20, z); + light.target.position.set(x, 0, z); + this.loop.updatables.push(light); + this.scene.add(light); + this.scene.add(light.target); + 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);