From 07e4a03b634f5fb8bc7aab33fc3e9442bdb345cc Mon Sep 17 00:00:00 2001 From: Aki Date: Mon, 5 Apr 2021 16:17:21 +0200 Subject: Refactored wreck icon loading --- derelict.js | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/derelict.js b/derelict.js index c35f285..4a166e7 100644 --- a/derelict.js +++ b/derelict.js @@ -2,8 +2,6 @@ import * as THREE from 'https://unpkg.com/three@0.126.1/build/three.module.js' import { OrbitControls } from 'https://unpkg.com/three@0.126.1/examples/jsm/controls/OrbitControls.js' import { CSS2DRenderer, CSS2DObject } from 'https://unpkg.com/three@0.126.1/examples/jsm/renderers/CSS2DRenderer.js' -let wreck - const SCALE = 10000 class SkirmishGrid { @@ -50,13 +48,13 @@ class Wreck { point = new THREE.Object3D() killmail - constructor({killmail, position}) { - const icon = document.importNode(obj.icon, true) + constructor({killmail, position, icon}) { + const iconElement = document.importNode(icon, true) const object2d = new CSS2DObject(this.domElement) this.killmail = killmail this.domElement.className = 'wreck' - this.domElement.appendChild(icon) + this.domElement.appendChild(iconElement) this.point.position.copy(position) this.point.add(object2d) } @@ -68,12 +66,11 @@ function loadWreckIcon() { .then(text => { const parser = new window.DOMParser() const svg = parser.parseFromString(text, "image/svg+xml") - wreck = svg.documentElement - return wreck + return svg.documentElement }) } -function processKillmails(grid, killmails) { +function processKillmails(grid, killmails, icon) { let clusters = [] killmails.forEach(km => { const pos = km.victim.position @@ -101,7 +98,7 @@ function processKillmails(grid, killmails) { const vec3 = killmail.victim.position vec3.sub(center) vec3.divideScalar(SCALE) - const wreck = new Wreck({position: vec3, killmail}) + const wreck = new Wreck({position: vec3, killmail, icon}) grid.add(wreck.point) elements.push(wreck.domElement) }) @@ -127,19 +124,20 @@ function init() { container.appendChild(renderer2d.domElement) const grid = new SkirmishGrid({renderer, renderer2d, container}) + const url = new URL(window.location.href) - loadWreckIcon() - .then(() => { - const url = new URL(window.location.href) - return fetch(url.searchParams.get("related") + ".json") - }) + let icon = loadWreckIcon() + + fetch(url.searchParams.get("related") + ".json") .then(response => response.json()) .then(killmails => { const url = km => `https://esi.evetech.net/latest/killmails/${km.id}/${km.hash}/?datasource=tranquility` const retrieve = km => fetch(url(km)).then(response => response.json()) return Promise.all(killmails.map(retrieve)) }) - .then(killmails => processKillmails(grid, killmails)) + .then(killmails => { + icon.then(icon => processKillmails(grid, killmails, icon)) + }) const helper = new THREE.GridHelper(50, 50) grid.add(helper) -- cgit v1.1