summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js100
-rw-r--r--index.html3
-rw-r--r--style.css8
3 files changed, 70 insertions, 41 deletions
diff --git a/derelict.js b/derelict.js
index ff100e0..7e2da08 100644
--- a/derelict.js
+++ b/derelict.js
@@ -2,12 +2,48 @@ 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
+let wreck
const SCALE = 10000
-init()
-animate()
+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()
@@ -34,7 +70,7 @@ function loadWreckIcon() {
})
}
-function processKillmails(killmails) {
+function processKillmails(grid, killmails) {
let clusters = []
killmails.forEach(km => {
const pos = km.victim.position
@@ -70,7 +106,7 @@ function processKillmails(killmails) {
div.appendChild(w)
const label = new CSS2DObject(div)
point.add(label)
- scene.add(point)
+ grid.add(point)
elements.push(div)
})
const timeline = document.getElementById("timeline")
@@ -82,10 +118,19 @@ function processKillmails(killmails) {
}
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()
+ 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(() => {
@@ -98,44 +143,21 @@ function init() {
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)
+ .then(killmails => processKillmails(grid, killmails))
- 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 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)
- scene.background = rt
+ grid.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)
+ window.addEventListener('resize', () => grid.onresize())
+ grid.draw()
}
-function animate() {
- requestAnimationFrame(animate)
- renderer.render(scene, camera)
- renderer2d.render(scene, camera)
-}
+init()
diff --git a/index.html b/index.html
index 5576386..b95430d 100644
--- a/index.html
+++ b/index.html
@@ -5,5 +5,6 @@
<link rel="stylesheet" type="text/css" href="style.css">
<title>Derelict</title>
<body>
-<script type="module" src="derelict.js"></script>
+<div id="container"></div>
<input type="range" min="0" max="1" value="0" id="timeline">
+<script type="module" src="derelict.js"></script>
diff --git a/style.css b/style.css
index a3faba9..2be182c 100644
--- a/style.css
+++ b/style.css
@@ -11,7 +11,13 @@ body {
fill: #eee;
}
+#container {
+ width: 100vw;
+ height: 100vh;
+}
+
#timeline {
position: absolute;
- top: 0px;
+ width: 50vw;
+ bottom: 0px;
}