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
|
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
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 = 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(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
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)
scene.background = rt
});
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)
}
|
