Added wreck icon

2 files changed, 23 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)
diff --git a/style.css b/style.css
index 9bc75dd..9187760 100644
--- a/style.css
+++ b/style.css
@@ -1,3 +1,8 @@
 body {
 	margin: 0;
 }
+
+.wreck {
+	width: 18px;
+	fill: #eee;
+}