three.js dev template - module
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 =...