<!--
LUME ✨👉 https://github.com/lume/lume
-->
<script src="https://unpkg.com/lume@0.3.0-alpha.14/dist/global.js"></script>

<style>
	html, body { width: 100%; height: 100%; margin: 0; touch-action: none; background: #27304d; }
	loading-icon {
		--loading-icon-color: 117, 199, 199; /*light teal*/
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%) scale(2);
		width: 10px; height: 10px;
	}
	* { transition: opacity 1s; }
	.hidden { opacity: 0 !important; }
</style>

<loading-icon id="loadingIcon"></loading-icon>

<lume-scene
	id="scene"
	class="hidden"
	webgl
	equirectangular-background="true"
	background="//assets.codepen.io/191583/luna-station.jpg"
	environment="//assets.codepen.io/191583/luna-station.jpg"
>
	<lume-point-light position="200 -200 200" intensity="1" color="white"></lume-point-light>
	<lume-ambient-light color="white" intensity="1.2"></lume-ambient-light>	
	<lume-camera-rig initial-polar-angle="0" min-distance="550" max-distance="2500" initial-distance="1200" align-point="0.5 0.5"></lume-camera-rig>
	
	<lume-gltf-model id="model" src="//assets.codepen.io/191583/DamagedHelmet.glb" scale="400 400 400" align-point="0.5 0.5"></lume-gltf-model>
</lume-scene>

<script>
	// Define all the LUME HTML elements with their default names.
	LUME.defineElements()
	
	model.rotation = (x, y, z) => [x, y + 0.06, z]

	const img = new Image
	img.src = '//assets.codepen.io/191583/luna-station.jpg'
	
	// wait for all assets to be loaded before showing the scene.
	Promise.all([
		new Promise(r => img.onload = r),
		new Promise(r => model.on('MODEL_LOAD', r)),
		new Promise(r => setTimeout(r, 1500)), // keep loader visible at least 1.75 sec, for effect
	]).then(() => {
		loadingIcon.classList.add('hidden')
		scene.classList.remove('hidden')
	})
</script>