Initial commit

1 files changed, 52 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)
+}