diff options
| -rw-r--r-- | derelict.js | 63 |
1 files changed, 40 insertions, 23 deletions
diff --git a/derelict.js b/derelict.js index f36f116..683e509 100644 --- a/derelict.js +++ b/derelict.js @@ -14,6 +14,7 @@ class SkirmishGrid { controls renderer renderer2d + active = false constructor({container, renderer, renderer2d}) { this.container = container @@ -41,7 +42,10 @@ class SkirmishGrid { this.renderer.render(this.scene, this.camera) this.renderer2d.render(this.scene, this.camera) this.controls.update() - requestAnimationFrame(() => this.draw()) + if (this.active) + requestAnimationFrame(() => this.draw()) + else + this.renderer2d.domElement.innerHTML = '' } onresize() { @@ -50,6 +54,14 @@ class SkirmishGrid { this.camera.aspect = this.container.clientWidth / this.container.clientHeight this.camera.updateProjectionMatrix() } + + enable() { + this.active = true + } + + disable() { + this.active = false + } } class Wreck { @@ -140,13 +152,14 @@ function averagePosition(positions) { return sum.divideScalar(positions.length) } -function processKillmails(grid, killmails, icon) { +function processKillmails(obj, killmails, icon) { const dates = killmails.map(km => Date.parse(km.killmail_time)) const start = Math.min(...dates) const end = Math.max(...dates) const clusters = killmails.reduce(splitKillmails, new Array()) - const center = averagePosition(clusters[0].map(km => km.victim.position)) + let elements = [] + let grids = [] const gridSelection = document.getElementById("grid") clusters.forEach(cluster => { const option = document.createElement("option") @@ -155,15 +168,29 @@ function processKillmails(grid, killmails, icon) { origin.divideScalar(METERS_IN_AU) option.text = `${origin.x.toFixed(1)} AU, ${origin.y.toFixed(1)} AU, ${origin.z.toFixed(1)} AU` gridSelection.options.add(option) + + const center = averagePosition(cluster.map(km => km.victim.position)) + const grid = new SkirmishGrid(obj) + cluster.forEach(killmail => { + killmail.victim.position.sub(center).divideScalar(SCALE) + const wreck = new Wreck({killmail, icon, grid}) + grid.add(wreck.point) + elements.push(wreck) + }) + grids.push(grid) + window.addEventListener('resize', () => grid.onresize()) }) - gridSelection.oninput = () => console.log(clusters[gridSelection.selectedIndex]) + gridSelection.oninput = () => { + grids.forEach(g => g.disable()) + grids[gridSelection.selectedIndex].enable() + grids[gridSelection.selectedIndex].draw() + } + gridSelection.oninput() - let elements = [] - clusters[0].forEach(killmail => { - killmail.victim.position.sub(center).divideScalar(SCALE) - const wreck = new Wreck({killmail, icon, grid}) - grid.add(wreck.point) - elements.push(wreck) + obj.skybox.then(skybox => { + const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height) + rt.fromEquirectangularTexture(obj.renderer, skybox) + grids.forEach(g => g.scene.background = rt) }) const timeline = document.getElementById("timeline") @@ -190,8 +217,9 @@ function init() { container.appendChild(renderer.domElement) container.appendChild(renderer2d.domElement) - const grid = new SkirmishGrid({renderer, renderer2d, container}) const url = new URL(window.location.href) + const loader = new THREE.TextureLoader() + const skybox = loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN. let icon = loadWreckIcon() @@ -205,19 +233,8 @@ function init() { return Promise.all(killmails.map(retrieve)) }) .then(killmails => { - icon.then(icon => processKillmails(grid, killmails, icon)) + icon.then(icon => processKillmails({skybox, renderer, renderer2d, container}, killmails, icon)) }) - - const loader = new THREE.TextureLoader() - loader.loadAsync("https://i.imgur.com/rDGOLFC.jpg") // TODO: Don't use imgur as CDN. - .then(skybox => { - const rt = new THREE.WebGLCubeRenderTarget(skybox.image.height) - rt.fromEquirectangularTexture(renderer, skybox) - grid.scene.background = rt - }); - - window.addEventListener('resize', () => grid.onresize()) - grid.draw() } init() |