diff options
Diffstat (limited to 'derelict.js')
| -rw-r--r-- | derelict.js | 23 |
1 files changed, 18 insertions, 5 deletions
diff --git a/derelict.js b/derelict.js index d32d269..b4b686e 100644 --- a/derelict.js +++ b/derelict.js @@ -2,24 +2,37 @@ 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 +let camera, scene, renderer, renderer2d, wreck -init() -animate() +load(() => { + init() + animate() +}) function Wreck(x, y, z) { const point = new THREE.Object3D() point.position.fromArray([x, y, z]) const div = document.createElement('div') - div.textContent = "<wreck icon>" - div.style.color = '#fff' + div.className = 'wreck' + const w = document.importNode(wreck, true) + div.appendChild(w) const label = new CSS2DObject(div) point.add(label) return point; } +function load(callback) { + const xhr = new XMLHttpRequest() + xhr.open("GET", "wreck.svg", true) + xhr.onload = function (e) { + wreck = xhr.responseXML.documentElement + callback() + } + xhr.send(null) +} + function init() { camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10) camera.position.set(1, 1, 1) |