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(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

	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)
}