Update Celestial Bodies Page

Author: GitHubDragonFly

viewers/templates/Celestial Bodies.html

@@ -91,11 +91,14 @@
 				body.name = name;
 				scene.add( body );
 
-				if (name === 'Earth') earth_loaded = true;
-				if (name === 'Moon') moon_loaded = true;
+				if (name === 'Earth') { body.receiveShadow = true; earth_loaded = true; }
+				if (name === 'Moon') { body.castShadow = true; moon_loaded = true; }
 				if (name === 'Sun') sun_loaded = true;
 
-				if (earth_loaded && moon_loaded && sun_loaded) {
+				if (earth_loaded === true && moon_loaded === true && sun_loaded === true) {
+					scene.getObjectByName( 'Earth' ).add( scene.getObjectByName( 'Moon' ) );
+					scene.getObjectByName( 'Earth' ).rotation.y -= Math.PI / 3.0;
+
 					bump_map.dispose();
 					normal_map.dispose();
 					document.getElementById('div_loading').style.display = 'none';
@@ -118,6 +121,27 @@
 				texture.dispose();
 			}, undefined, () => { console.log( 'Error loading textures' ) });
 
+			await createCelestialBody(
+				'Sun',
+				5,
+				'', 
+				{ x: 50, y: 3, z: 15 }
+			);
+
+			await createCelestialBody(
+				'Moon',
+				0.5,
+				'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/moon_1024.jpg', 
+				{ x: 5, y: 1, z: 1.35 }
+			);
+
+			await createCelestialBody(
+				'Earth',
+				2.25,
+				'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_4096.jpg', 
+				{ x: -4, y: 3, z: -0.25 }
+			);
+
 			let camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 			isMobile === true ? camera.position.set( 0, 0, 50 ) : camera.position.set( 0, 0, 12 );
 			scene.add( camera );
@@ -141,17 +165,24 @@
 			document.body.appendChild( renderer.domElement );
 
 			let controls = new OrbitControls( camera, renderer.domElement );
-			controls.target.set( 0, 3, 0 );
+			controls.target.set( 0, 4, 0 );
 			controls.enableDamping = true;
+			controls.autoRotate = true;
+			controls.autoRotateSpeed = -0.05;
 			controls.zoomSpeed = 0.6;
 			controls.rotateSpeed = 0.6;
 			controls.keyPanSpeed = 0.6;
 			controls.panSpeed = 0.6;
 
 			let light = new THREE.DirectionalLight( 0xffffff, 5 );
-			light.position.set( 25, 5, 50 );
-			let ambient_light = new THREE.AmbientLight( 0xffffff, 0.075 );
+			light.position.set( 50, 3, 15 );
+			light.castShadow = true;
+			light.shadow.mapSize.width = 2048;
+			light.shadow.mapSize.height = 2048;
+
+			let ambient_light = new THREE.AmbientLight( 0xffffff, 0.09 );
 			ambient_light.position.set( -3, 3, -25 );
+
 			scene.add( light, ambient_light );
 
 			// Emissive bloom post processing
@@ -164,42 +195,20 @@
 
 			let outputPass = scenePass.getTextureNode();
 			let emissivePass = scenePass.getTextureNode( 'emissive' );
-			let bloomPass = bloom( emissivePass, 1.5, 0.35 );
+			let bloomPass = bloom( emissivePass, 2.5, 0.35 );
 
 			let postProcessing = new THREE.PostProcessing( renderer );
 			postProcessing.outputNode = outputPass.add( bloomPass );
 
 			renderer.setAnimationLoop(() => {
 				controls.update();
 
-				scene.rotation.y -= 0.00005; // Scene rotation
-				scene.getObjectByName( 'Earth' ).rotation.y += 0.0005; // Earth rotation
-				scene.getObjectByName( 'Moon' ).rotation.y -= 0.001; // Moon rotation
+				scene.getObjectByName( 'Earth' ).rotation.y += 0.0005; // Earth + Moon rotation
+				scene.getObjectByName( 'Moon' ).rotation.y -= 0.0015; // Moon rotation
 
 				postProcessing.render();
 			});
 
-			await createCelestialBody(
-				'Sun',
-				5,
-				'', 
-				{ x: 25, y: 5, z: 50 }
-			);
-
-			await createCelestialBody(
-				'Moon',
-				0.5,
-				'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/moon_1024.jpg', 
-				{ x: 2.5, y: 3, z: 0 }
-			);
-
-			await createCelestialBody(
-				'Earth',
-				2.25,
-				'https://raw.githubusercontent.com/mrdoob/three.js/master/examples/textures/planets/earth_atmos_4096.jpg', 
-				{ x: -4, y: 3, z: 0 }
-			);
-
 			window.addEventListener("resize", (event) => {
 				camera.aspect = innerWidth / innerHeight;
 				camera.updateProjectionMatrix();