1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
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 camera, scene, renderer, renderer2d, wreck
// TODO: This needs to be retrieved automatically from some kill aggregator.
const killmails = [
{id: 91831540, hash: "28d382e3f65b197a09b77387d1bc1c0b1c119f7a"},
{id: 91831391, hash: "211d140b554fdd3029b9fdfc1845047e02cd247b"},
{id: 91831371, hash: "40b6cf48a7195b78c90cd995fc4b08e2f02adc5f"},
{id: 91831358, hash: "56d1a2febc5c7a0b8ad555dfa6a831a56127cd6a"},
{id: 91831348, hash: "bddef3e77d7a7adba6f0945eab0348f6f22da065"},
{id: 91831332, hash: "88eecb7ce4cac18bf9af37121099e6e4e4b96a00"},
{id: 91831322, hash: "b557aa9e96e152692cadc8cceb53051efb19121f"},
{id: 91831309, hash: "8c41b6fb2a9f1d5161315be247b8108aa862174e"},
{id: 91831297, hash: "7f195d59988699c3d8acfed7f440c3f3bfb2645b"},
{id: 91831290, hash: "70094fa543cd40f4358b5f43f51834ce570fe1c0"},
{id: 91831288, hash: "a4ba2f968b61733871422f66bedcb3847459dc62"},
{id: 91831269, hash: "9f2810a13f9c4f91a9afa84f4796d2ec44f9bca5"},
{id: 91831253, hash: "be9ebd1b3a5867c592ad9ac4bb94977681eacb8e"},
{id: 91831252, hash: "ac952791e96bbe2dfe9212c09fc5a7cfc52beb32"},
{id: 91831179, hash: "a56823e7d3f7891839cd0057cb94e5c836cf280e"},
{id: 91831174, hash: "38e52cc21615293a501ab5547c3c10ee4e8ebddd"},
{id: 91831160, hash: "406dcc934b1ba7d65fdfa5aead88f15b54f811e7"},
{id: 91831071, hash: "7945f486e20971a124d02fbe0dc837444575cf4c"},
{id: 91831050, hash: "29b01fa248efffe2ebe7dc220e584ed779a91b28"},
]
const SCALE = 10000
init()
animate()
function Wreck(vec3) {
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(killmails) {
let center = new THREE.Vector3()
const positions = killmails.map(km => km.victim.position)
positions.forEach(pos => center.add(new THREE.Vector3(pos.x, pos.y, pos.z)))
center.divideScalar(positions.length)
killmails.forEach(km => {
const pos = km.victim.position
const vec3 = new THREE.Vector3(pos.x, pos.y, pos.z)
vec3.sub(center)
vec3.divideScalar(SCALE)
scene.add(Wreck(vec3))
})
}
function init() {
camera = new THREE.PerspectiveCamera(80, window.innerWidth / window.innerHeight, 0.1, 100)
camera.position.set(8, 8, 8)
camera.lookAt(0, 0, 0)
scene = new THREE.Scene()
loadWreckIcon()
.then(() => {
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(processKillmails)
const grid = new THREE.GridHelper(30, 30)
scene.add(grid)
renderer = new THREE.WebGLRenderer({antialias: true})
renderer.setSize(window.innerWidth, window.innerHeight)
document.body.appendChild(renderer.domElement)
renderer2d = new CSS2DRenderer()
renderer2d.setSize(window.innerWidth, window.innerHeight)
renderer2d.domElement.style.position = 'absolute'
renderer2d.domElement.style.top = '0px'
document.body.appendChild(renderer2d.domElement)
const controls = new OrbitControls(camera, renderer2d.domElement)
controls.minDistance = 2
controls.maxDistance = 24
window.addEventListener('resize', onWindowResize)
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight
camera.updateProjectionMatrix()
renderer.setSize(window.innerWidth, window.innerHeight)
renderer2d.setSize(window.innerWidth, window.innerHeight)
}
function animate() {
requestAnimationFrame(animate)
renderer.render(scene, camera)
renderer2d.render(scene, camera)
}
|
