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' const ESI = "https://esi.evetech.net/latest" const SCALE = 10000 const METERS_IN_AU = 149597871000 const EXPIRY = 1000 * 60 * 5 class SkirmishGrid { scene = new THREE.Scene() helper = new THREE.GridHelper(50, 50) camera controls renderer renderer2d constructor({container, renderer, renderer2d}) { this.container = container this.renderer = renderer this.renderer2d = 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 this.controls.enableDamping = true this.controls.dampingFactor = 0.4 this.add(this.helper) } add(obj) { this.scene.add(obj) } draw() { this.renderer.render(this.scene, this.camera) this.renderer2d.render(this.scene, this.camera) this.controls.update() 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() } } class Wreck { domElement = document.createElement('div') point = new THREE.Object3D() killmail constructor({killmail, icon, grid}) { const iconElement = document.importNode(icon, true) const labelElement = document.createElement('div') const object2d = new CSS2DObject(this.domElement) const team = killmail.team > 1 ? "teamA" : "teamB" const shipTypeId = killmail.victim.ship_type_id fetch(`${ESI}/universe/types/${shipTypeId}/`, {cache: "force-cache"}) .then(response => response.json()) .then(typeId => { labelElement.textContent = typeId.name this.domElement.dataset.type = typeId.name return fetch(`${ESI}/universe/groups/${typeId.group_id}/`, {cache: "force-cache"}) }) .then(response => response.json()) .then(group => this.domElement.dataset.group = group.name) labelElement.classList.add('label') this.killmail = killmail this.point.position.copy(killmail.victim.position) this.point.add(object2d) this.domElement.classList.add('wreck', team) this.domElement.appendChild(labelElement) this.domElement.appendChild(iconElement) this.domElement.onclick = () => window.open(`https://zkillboard.com/kill/${this.killmail.killmail_id}/`) this.domElement.oncontextmenu = () => { grid.controls.target.copy(this.point.position) grid.controls.update() } } toggleKilled(timestamp) { const timeDifference = timestamp - Date.parse(this.killmail.killmail_time) if (timeDifference > EXPIRY) { this.domElement.classList.add('expired') this.domElement.classList.remove('future', 'killed') } else if (timeDifference >= 0) { this.domElement.classList.add('killed') this.domElement.classList.remove('expired', 'future') } else { this.domElement.classList.add('future') this.domElement.classList.remove('killed', 'expired') } } } 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") return svg.documentElement }) } function vec3FromXYZ({x, y, z}) { return new THREE.Vector3(x, y, z) } function splitKillmails(clusters, killmail) { const vec3 = vec3FromXYZ(killmail.victim.position) const found = clusters.find(cluster => cluster[0].victim.position.distanceTo(vec3) < 100 * SCALE) killmail.victim.position = vec3 if (found === undefined) { clusters.push([killmail]) } else { found.push(killmail) } return clusters } function averagePosition(positions) { const sum = positions.reduce((sum, pos) => sum.add(pos), new THREE.Vector3()) return sum.divideScalar(positions.length) } function processKillmails(grid, 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)) const gridSelection = document.getElementById("grid") clusters.forEach(cluster => { const option = document.createElement("option") const origin = new THREE.Vector3() origin.copy(cluster[0].victim.position) 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) }) gridSelection.oninput = () => console.log(clusters[gridSelection.selectedIndex]) 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) }) const timeline = document.getElementById("timeline") const step = 1000 const toggleAll = () => elements.forEach(item => item.toggleKilled(timeline.value)) timeline.min = start - step timeline.max = end + step + EXPIRY timeline.value = timeline.min timeline.step = step timeline.oninput = toggleAll toggleAll() } 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}) const url = new URL(window.location.href) let icon = loadWreckIcon() fetch(url.searchParams.get("related") + ".json") .then(response => response.json()) .then(killmails => { const url = km => `${ESI}/killmails/${km.id}/${km.hash}/?datasource=tranquility` const retrieve = km => fetch(url(km)) .then(response => response.json()) .then(data => { data.team = km.team; return data }) return Promise.all(killmails.map(retrieve)) }) .then(killmails => { icon.then(icon => processKillmails(grid, 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()