diff options
| -rw-r--r-- | derelict.js | 52 | ||||
| -rw-r--r-- | index.html | 5 | ||||
| -rw-r--r-- | style.css | 3 | ||||
| -rw-r--r-- | wreck.svg | 5 |
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> |
