SabrinaMarkon/index.html

## 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>