From cfc3873cdc41179b114e2342bfbe00629a145a50 Mon Sep 17 00:00:00 2001 From: Aki Date: Tue, 30 Mar 2021 22:43:39 +0200 Subject: Initial commit --- derelict.js | 52 ++++++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 5 +++++ style.css | 3 +++ wreck.svg | 5 +++++ 4 files changed, 65 insertions(+) create mode 100644 derelict.js create mode 100644 index.html create mode 100644 style.css create mode 100644 wreck.svg 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 = "" + 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 @@ + + +Derelict + + 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 @@ + + + + + -- cgit v1.1