SabrinaMarkon · March 23, 2019 04:20
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Three.js Earth and Moon Orbit #1</title>
  
  
 </head>
 <body>



 </body>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
 <script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
 <script src="http://uopeopleweb.com/js/math.js"/></script>
 <script src="http://uopeopleweb.com/js/Detector.js"/></script>
 <script id="jsbin-javascript">

 var width = 600, height = 500;
 	 
 var renderer, scene, light, camera, cameraControls, loader;
  
 var geometry, mesh, group, earthTexture, moonTexture;
 
 init();
 animate();
 render(); 
  
 //set up renderer, scene, camera, camera controls, and light
 function init() {
    renderer = new THREE.WebGLRenderer();
 //include shadow physics for webgl renderer
    renderer.shadowMap.enabled = true;
    renderer.shadowMap.type = THREE.PCFSoftShadowMap;
    renderer.setSize( width, height );
    document.body.appendChild( renderer.domElement );
    
    scene = new THREE.Scene();
  
    camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
    camera.position.z = 500;
    cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
 	cameraControls.addEventListener( 'mousemove', renderer );
    cameraControls.autoRotate = true;
    scene.add( camera );

 //The directional light acts as the sun
    light = new THREE.DirectionalLight( 'white' );
 //default is set to false
    light.castShadow = true; 
    light.position.set( 2, 1, 0 );
    scene.add( light );

 //Let us load the textures
 //I chose to use another texture than the one given from the assignment
 //A quick search led me to a texture map designed to fit in a sphere
    loader = new THREE.TextureLoader();  
    loader.crossOrigin = '';
 //EarthTexture    
    earthTexture = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthmap1k.jpg' );
 //MoonTexture
    moonTexture = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/moon_texture_2.jpg' );

 //Earth
    var material = [];
    material.push( new THREE.MeshLambertMaterial( { map: earthTexture } ) );
    geometry = new THREE.SphereGeometry( 100, 30, 30 );
    mesh = new THREE.Mesh( geometry, material );
 //we want our objects to cast and receive shadows
    mesh.receiveShadow = true;
    mesh.castShadow = true; 
 //Moon
    var material2 = [];
    material2.push( new THREE.MeshLambertMaterial( { map: moonTexture } ) );
    geometry2 = new THREE.SphereGeometry( 25, 30, 30 );
    mesh2 = new THREE.Mesh( geometry2, material2 );
    mesh2.receiveShadow = true;
    mesh2.castShadow = true;
    mesh2.position.x = 250;
    mesh2.position.y = 50;
  
 //I thought it would be cool to add stars to the background
 var starsGeometry = new THREE.Geometry();

 for ( var i = 0; i < 10000; i ++ ) {

 	var star = new THREE.Vector3();
 	star.x = THREE.Math.randFloatSpread( 2000 );
 	star.y = THREE.Math.randFloatSpread( 2000 );
 	star.z = THREE.Math.randFloatSpread( 2000 );

 	starsGeometry.vertices.push( star );

 }

 var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );

 var starField = new THREE.Points( starsGeometry, starsMaterial );
  //REFERENCE// 
  //https://threejs.org/docs/#api/en/materials/PointsMaterial
 
 //Pull the scenes together
    group = new THREE.Group();
    group.add( mesh );
    group.add( mesh2 );
    group.add( starField );
    scene.add( group );
        
 } 
 function animate() {
    requestAnimationFrame( animate );
  
    renderer.render( scene, camera );
 }
 function render() {
 //This is how we will rotate the objects
  mesh.rotation.y -= .005;
  mesh2.rotation.y -= .004;
  group.rotation.y += .002;

  renderer.render( scene, camera );
  requestAnimationFrame( render );
 };
 
  </script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Three.js Earth and Moon Orbit #1</title>


	</head>
	<body>



	</body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/85/three.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.5/dat.gui.min.js"></script>
	<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
	<script src="http://uopeopleweb.com/js/math.js"/></script>
	<script src="http://uopeopleweb.com/js/Detector.js"/></script>
	<script id="jsbin-javascript">

	var width = 600, height = 500;

	var renderer, scene, light, camera, cameraControls, loader;

	var geometry, mesh, group, earthTexture, moonTexture;

	init();
	animate();
	render();

	//set up renderer, scene, camera, camera controls, and light
	function init() {
	renderer = new THREE.WebGLRenderer();
	//include shadow physics for webgl renderer
	renderer.shadowMap.enabled = true;
	renderer.shadowMap.type = THREE.PCFSoftShadowMap;
	renderer.setSize( width, height );
	document.body.appendChild( renderer.domElement );

	scene = new THREE.Scene();

	camera = new THREE.PerspectiveCamera( 70, width / height, 1, 1000 );
	camera.position.z = 500;
	cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
	cameraControls.addEventListener( 'mousemove', renderer );
	cameraControls.autoRotate = true;
	scene.add( camera );

	//The directional light acts as the sun
	light = new THREE.DirectionalLight( 'white' );
	//default is set to false
	light.castShadow = true;
	light.position.set( 2, 1, 0 );
	scene.add( light );

	//Let us load the textures
	//I chose to use another texture than the one given from the assignment
	//A quick search led me to a texture map designed to fit in a sphere
	loader = new THREE.TextureLoader();
	loader.crossOrigin = '';
	//EarthTexture
	earthTexture = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/141228/earthmap1k.jpg' );
	//MoonTexture
	moonTexture = loader.load( 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/409445/moon_texture_2.jpg' );

	//Earth
	var material = [];
	material.push( new THREE.MeshLambertMaterial( { map: earthTexture } ) );
	geometry = new THREE.SphereGeometry( 100, 30, 30 );
	mesh = new THREE.Mesh( geometry, material );
	//we want our objects to cast and receive shadows
	mesh.receiveShadow = true;
	mesh.castShadow = true;
	//Moon
	var material2 = [];
	material2.push( new THREE.MeshLambertMaterial( { map: moonTexture } ) );
	geometry2 = new THREE.SphereGeometry( 25, 30, 30 );
	mesh2 = new THREE.Mesh( geometry2, material2 );
	mesh2.receiveShadow = true;
	mesh2.castShadow = true;
	mesh2.position.x = 250;
	mesh2.position.y = 50;

	//I thought it would be cool to add stars to the background
	var starsGeometry = new THREE.Geometry();

	for ( var i = 0; i < 10000; i ++ ) {

	var star = new THREE.Vector3();
	star.x = THREE.Math.randFloatSpread( 2000 );
	star.y = THREE.Math.randFloatSpread( 2000 );
	star.z = THREE.Math.randFloatSpread( 2000 );

	starsGeometry.vertices.push( star );

	}

	var starsMaterial = new THREE.PointsMaterial( { color: 0x888888 } );

	var starField = new THREE.Points( starsGeometry, starsMaterial );
	//REFERENCE//
	//https://threejs.org/docs/#api/en/materials/PointsMaterial

	//Pull the scenes together
	group = new THREE.Group();
	group.add( mesh );
	group.add( mesh2 );
	group.add( starField );
	scene.add( group );

	}
	function animate() {
	requestAnimationFrame( animate );

	renderer.render( scene, camera );
	}
	function render() {
	//This is how we will rotate the objects
	mesh.rotation.y -= .005;
	mesh2.rotation.y -= .004;
	group.rotation.y += .002;

	renderer.render( scene, camera );
	requestAnimationFrame( render );
	};

	</script>
	</html>