three.js dev template - module

by Dragon3DGraff

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}
canvas {
	display: block;
}
.label {
	color: #FFF;
	font-family: sans-serif;
	padding: 2px;
	background: rgba( 0, 0, 0, .6 );
  transform: rotate(30deg);
}

JavaScript

// Simple three.js example

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";
import { CSS2DRenderer, CSS2DObject } from 'https://threejs.org/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, 1, 1000 );
  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 =...