three.js dev template - module

by charlieWhite84

CSS

body {
  background-color: #000;
  margin: 0px;
  overflow: hidden;
}

.label {
  color: #FFF;
  font-family: sans-serif;
  padding: 2px;
  background: rgba(0, 0, 0, .6);
}

JavaScript

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";

import { OrbitControls } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js';
import { CSS2DRenderer, CSS2DObject } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/renderers/CSS2DRenderer.js';

var camera, scene, renderer, labelRenderer;

var clock = new THREE.Clock();
var textureLoader = new THREE.TextureLoader();

var earth, moon;

init();
animate();

function init() {

	var EARTH_RADIUS = 1;
	var MOON_RADIUS = 0.27;

	camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 200 );
	camera.position.set( 10, 5, 20 );

	scene = new THREE.Scene();

	var dirLight = new THREE.DirectionalLight( 0xffffff );
	dirLight.position.set( 0, 0, 1 );
	scene.add( dirLight );

	var axesHelper = new THREE.AxesHelper( 5 );
	scene.add( axesHelper );

	//

	var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
	var earthMaterial = new THREE.MeshPhongMaterial( {
		specular: 0x333333,
		shininess: 5,
		map: textureLoader.load( 'https://threejs.org/examples/textures/planets/earth_atmos_2048.jpg' ),
		specularMap: textureLoader.load( 'https://threejs.org/examples/textures/planets/earth_specular_2048.jpg' ),
		normalMap: textureLoader.load( 'https://threejs.org/examples/textures/planets/earth_normal_2048.jpg' ),
		normalScale: new THREE.Vector2( 0.85, 0.85 )
	} );
	earth = new THREE.Mesh( earthGeometry, earthMaterial );
	scene.add( earth );

	var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
	var moonMaterial = new THREE.MeshPhongMaterial( {
		shininess: 5,
		map: textureLoader.load( 'https://threejs.org/examples/textures/planets/moon_1024.jpg' )
	} );
	moon = new THREE.Mesh( moonGeometry, moonMaterial );
	scene.add( moon );

	//

	var earthDiv = document.createElement( 'div' );
	earthDiv.className = 'label';
	earthDiv.textContent = 'Earth';
	earthDiv.style.marginTop =...