summaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--derelict.js52
-rw-r--r--index.html5
-rw-r--r--style.css3
-rw-r--r--wreck.svg5
4 files changed, 65 insertions, 0 deletions
diff --git a/derelict.js b/derelict.js
new file mode 100644
index 0000000..609fd01
--- /dev/null
+++ b/derelict.js
@@ -0,0 +1,52 @@
+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
+
+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'
+ const label = new CSS2DObject(div)
+ point.add(label)
+
+ return point;
+}
+
+function init() {
+ camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 10)
+ camera.position.set(1, 1, 1)
+ camera.lookAt(0, 0, 0)
+ scene = new THREE.Scene()
+ const helper = new THREE.AxesHelper(1)
+ scene.add(helper)
+
+ scene.add(Wreck(1, 0, 0))
+ scene.add(Wreck(1, 2, -1))
+ scene.add(Wreck(0.2, -1.1, 0.2))
+ renderer = new THREE.WebGLRenderer({antialias: true})
+ renderer.setSize(window.innerWidth, window.innerHeight)
+ document.body.appendChild(renderer.domElement)
+
+ 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 = 0.5
+ controls.maxDistance = 8
+}
+
+function animate() {
+ requestAnimationFrame(animate)
+ renderer.render(scene, camera)
+ renderer2d.render(scene, camera)
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..950d104
--- /dev/null
+++ b/index.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<html lang="en">
+<title>Derelict</title>
+<link rel="stylesheet" type="text/css" href="style.css">
+<script type="module" src="derelict.js"></script>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..9bc75dd
--- /dev/null
+++ b/style.css
@@ -0,0 +1,3 @@
+body {
+ margin: 0;
+}
diff --git a/wreck.svg b/wreck.svg
new file mode 100644
index 0000000..4639d0e
--- /dev/null
+++ b/wreck.svg
@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 6 3">
+ <path id="top" d="M 0,0 v 0.5 h 6 v -0.5 z" />
+ <path id="bottom" d="M 0,1 h 6 l -3,2 z" />
+</svg>