diff options
| -rw-r--r-- | derelict.js | 100 | ||||
| -rw-r--r-- | index.html | 3 | ||||
| -rw-r--r-- | style.css | 8 |
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() @@ -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> @@ -11,7 +11,13 @@ body { fill: #eee; } +#container { + width: 100vw; + height: 100vh; +} + #timeline { position: absolute; - top: 0px; + width: 50vw; + bottom: 0px; } |