From 01e0f6d262e0a13fe83eed256ebe49f0dc84965b Mon Sep 17 00:00:00 2001 From: Aki Date: Wed, 31 Mar 2021 23:01:33 +0200 Subject: Added wreck icon --- derelict.js | 23 ++++++++++++++++++----- style.css | 5 +++++ 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 = "" - 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; +} -- cgit v1.1