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 { scene = new THREE.Scene() camera controls renderer renderer2d constructor(obj) { this.container = obj.container this.renderer = obj.renderer this.renderer2d = obj.renderer2d const aspect = this.container.clientWidth / this.container.clientHeight this.camera = new THREE.PerspectiveCamera(80, aspect, 0.1, 1000) this.camera.position.set(8, 8, 8) this.camera.lookAt(0, 0, 0) this.controls = new OrbitControls(this.camera, this.renderer2d.domElement) this.controls.minDistance = 2 this.controls.maxDistance = 30 } add(obj) { this.scene.add(obj) } draw() { this.renderer.render(this.scene, this.camera) this.renderer2d.render(this.scene, this.camera) requestAnimationFrame(() => this.draw()) } onresize() { this.renderer.setSize(this.container.clientWidth, this.container.clientHeight) this.renderer2d.setSize(this.container.clientWidth, this.container.clientHeight) this.camera.aspect = this.container.clientWidth / this.container.clientHeight this.camera.updateProjectionMatrix() } } function Wreck(vec3, km) { const point = new THREE.Object3D() point.position.copy(vec3) const div = document.createElement('div') div.className = 'wreck' const w = document.importNode(wreck, true) div.appendChild(w) const label = new CSS2DObject(div) point.add(label) return point; } function loadWreckIcon() { return fetch("wreck.svg") .then(response => response.text()) .then(text => { const parser = new window.DOMParser() const svg = parser.parseFromString(text, "image/svg+xml") wreck = svg.documentElement return wreck }) } function processKillmails(grid, killmails) { let clusters = [] killmails.forEach(km => { const pos = km.victim.position km.victim.position = new THREE.Vector3(pos.x, pos.y, pos.z) const vec3 = km.victim.position let added = false for (const cluster of clusters) { if (cluster[0].victim.position.distanceTo(vec3) < 100 * SCALE) { cluster.push(km) added = true break } } if (!added) { clusters.push([km]) } }) let center = new THREE.Vector3() let positions = clusters[0].map(km => km.victim.position) positions.forEach(pos => center.add(new THREE.Vector3(pos.x, pos.y, pos.z))) center.divideScalar(positions.length) clusters[0].sort((a, b) => a.killmail_time.localeCompare(b.killmail_time)) let elements = [] clusters[0].forEach(km => { const vec3 = km.victim.position vec3.sub(center) vec3.divideScalar(SCALE) const point = new THREE.Object3D() point.position.copy(vec3) const div = document.createElement('div') div.className = 'wreck' const w = document.importNode(wreck, true) div.appendChild(w) const label = new CSS2DObject(div) point.add(label) grid.add(point) elements.push(div) }) const timeline = document.getElementById("timeline") timeline.max = elements.length + 1 timeline.oninput = function () { elements.slice(0, this.value).forEach(element => element.classList.add("killed")) elements.slice(this.value, this.max).forEach(element => element.classList.remove("killed")) } } function init() { const container = document.getElementById("container") const renderer = new THREE.WebGLRenderer({antialias: true}) const renderer2d = new CSS2DRenderer() renderer.setSize(container.clientWidth, container.clientHeight) renderer2d.setSize(container.clientWidth, container.clientHeight) renderer2d.domElement.style.position = 'absolute' renderer2d.domElement.style.top = '0px' container.appendChild(renderer.domElement) container.appendChild(renderer2d.domElement) const grid = new SkirmishGrid({renderer, renderer2d, container}) loadWreckIcon() .then(() => { const url = new URL(window.location.href) return 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)) const helper = new THREE.GridHelper(50, 50) grid.add(helper) 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()