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, wreck 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.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(80, window.innerWidth / window.innerHeight, 0.1, 100) camera.position.set(8, 8, 8) camera.lookAt(0, 0, 0) scene = new THREE.Scene() const grid = new THREE.GridHelper(30, 30) scene.add(grid) 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 = 2 controls.maxDistance = 24 window.addEventListener('resize', onWindowResize) } function onWindowResize() { camera.aspect = window.innerWidth / window.innerHeight camera.updateProjectionMatrix() renderer.setSize(window.innerWidth, window.innerHeight) renderer2d.setSize(window.innerWidth, window.innerHeight) } function animate() { requestAnimationFrame(animate) renderer.render(scene, camera) renderer2d.render(scene, camera) }