crowd-funder-for-time-pwa/src/components/World/World.js

// from https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80

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";
import { createLights } from "./components/lights.js";
import { createScene } from "./components/scene.js";
import { createTerrain } from "./components/objects/terrain.js";
import { Loop } from "./systems/Loop.js";
import { Resizer } from "./systems/Resizer.js";
import { createControls } from "./systems/controls.js";
import { createRenderer } from "./systems/renderer.js";

const ANIMATION_DURATION_SECS = 10;
const BASE32 = "0123456789ABCDEFGHJKMNPQRSTVWXYZ";
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 THREE.SpotLight(0xffffff, 0, 0, Math.PI / 8, 0.5, 0);
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  light.tick = () => {};
  return light;
}

class World {
  constructor(container, vue) {
    this.update = this.update.bind(this);

    // Instances of camera, scene, and renderer
    this.camera = createCamera();
    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 = [];

    // Initialize Loop
    this.loop = new Loop(this.camera, this.scene, this.renderer);

    container.append(this.renderer.domElement);

    // Orbit Controls
    const controls = createControls(this.camera, this.renderer.domElement);

    // Light Instance, with optional light helper
    const { light } = createLights(COLOR1);

    // Terrain Instance
    const terrain = createTerrain({
      color: COLOR1,
      height: PLATFORM_SIZE + PLATFORM_BORDER * 2,
      width:
        PLATFORM_SIZE + PLATFORM_BORDER * 2 + PLATFORM_EDGE_FOR_UNKNOWNS * 2,
    });

    this.loop.updatables.push(controls);
    this.loop.updatables.push(light);
    this.loop.updatables.push(terrain);

    this.scene.add(light, terrain);

    this.loadClaims(vue);

    requestAnimationFrame(this.update);

    // Responsive handler
    const resizer = new Resizer(container, this.camera, this.renderer);
    resizer.onResize = () => {
      this.render();
    };
  }

  update(time) {
    TWEEN.update(time);
    this.lights.forEach((light) => {
      light.updateMatrixWorld();
      light.target.updateMatrixWorld();
    });
    this.lights.forEach((bush) => {
      bush.updateMatrixWorld();
    });
    requestAnimationFrame(this.update);
  }

  async loadClaims(vue) {
    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
    try {
      const url =
        endorserApiServer + "/api/v2/report/claims?claimType=GiveAction";
      const headers = { "Content-Type": "application/json" };
      const resp = await axios.get(url, { headers: headers });
      if (resp.status === 200) {
        const minDate = resp.data.data[resp.data.data.length - 1].issuedAt;
        const maxDate = resp.data.data[0].issuedAt;
        const minTimeMillis = new Date(minDate).getTime();
        const fullTimeMillis = new Date(maxDate).getTime() - minTimeMillis;
        // 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)

          // compute location for this claim
          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;
          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);

          // now figure out the timing and shine a light
          const timeDelayMillis =
            fakeRealRatio *
            (new Date(claim.issuedAt).getTime() - minTimeMillis);
          new TWEEN.Tween(light)
            .delay(timeDelayMillis)
            .to({ intensity: 100 }, 10)
            .chain(
              new TWEEN.Tween(light.position)
                .to({ y: 5 }, 5000)
                .onComplete(() => {
                  this.scene.remove(light);
                  light.dispose();
                })
            )
            .start();
          this.lights = [...this.lights, light];
        }
      } else {
        console.log(
          "Got bad server response status & data of",
          resp.status,
          resp.data
        );
        vue.setAlert(
          "Error With Server",
          "There was an error retrieving your claims from the server."
        );
      }
    } catch (error) {
      console.log("Got exception contacting server:", error);
      vue.setAlert(
        "Error With Server",
        "There was a problem retrieving your claims from the server."
      );
    }
  }

  render() {
    // draw a single frame
    this.renderer.render(this.scene, this.camera);
  }

  // Animation handlers
  start() {
    this.loop.start();
  }

  stop() {
    this.loop.stop();
  }
}

export { World };