SabrinaMarkon/index.html

## index.html
<!DOCTYPE html>
<html>

<head>
  <!--<script src="https://getfirebug.com/firebug-lite-debug.js"></script>-->
  <meta name="description" content="Three.js Earth and Moon Orbit #2" />
  <meta charset="utf-8" />
  <title>Three.js Earth and Moon Orbit #2</title>
  <style>
    #container {
    			background: #000000;
    			width: 100%;
    			height: 100%;
    		}
  </style>
  <meta charset=utf-8 />
  <style id="jsbin-css">
  </style>
</head>

<body>
  <div id="container">
  </div>


</body>
<script>
  'use strict';
</script>
<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="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.2/math.min.js"></script>
<script>

  // set the scene size
  	const WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

  	// set some camera attributes
  	const VIEW_ANGLE = 30, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 10000;

  	// get the DOM element to attach to
  	const $container = $('#container');

  	// create a WebGL renderer, camera, and a scene

    const renderer = new THREE.WebGLRenderer();
  	const scene = new THREE.Scene();
  	let clock = new THREE.Clock();
  	const camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
  	 // the camera starts at 0,0,0 so pull it back
  	camera.position.z = 600;
  	// add the camera to the scene
  	scene.add(camera);

  	// set up the camera controls so the user can rotate the scene with their mouse.
  	const cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
    cameraControls.autoRotate = false;

  	// start the renderer
  	renderer.setSize(WIDTH, HEIGHT);

  	// attach the render-supplied DOM element
  	$container.append(renderer.domElement);


    // LIGHTING:

     /* "a HemisphereLight takes a sky color and a ground color and just multplies
    the material's color between those 2 colors" (ThreeJSFundamentals.org, n.d.) */
    const hlightskyColor = 0x87CEFA;  // coming from above - light blue
    const hlightgroundColor = 0x00BFFF;  // coming from below - deep sky blue
    const hlightintensity = 0.3;
    const hemispherelight = new THREE.HemisphereLight(hlightskyColor, hlightgroundColor, hlightintensity);
    scene.add(hemispherelight);


     // a DirectionalLight light often represents the sun and we need it here to combine with the
    // hemisphere or ambient light to shade.
    const dlightcolor = 0xFFFACD;
    const dlightintensity = 1.2;
    const directionallight = new THREE.DirectionalLight(dlightcolor, dlightintensity);
    directionallight.position.set(20, 10, 10);
    directionallight.target.position.set(0, 0, 0); // light shines in direction of its target (deafults to origin)
    directionallight.castShadow = true;
    scene.add(directionallight);
    // shows a plane, to represent the light, and a line from the light to the target (ThreeJSFundamentals.org, n.d.)
    const dlighthelper = new THREE.DirectionalLightHelper(directionallight);
    scene.add(dlighthelper);


    // GEOMETRY:

  	// set up the sphere properties.
  	const segments = 32, rings = 32, earthradius = 45, moonradius = 10, starsradius = 100;


    // STAR FIELD - scene background.
   	const starsloader = new THREE.TextureLoader();
  	starsloader.crossOrigin = '';
  	const starsjpg = starsloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/stars.jpg',
                        function ( texture ) {
                        var img = texture.image;
                        bgWidth= img.width;
                        bgHeight = img.height;
                        }
                     );
    // Add the background texture to the scene's background property.
    scene.background = starsjpg;
    // make sure the background image is resized to fill the scene.
    starsjpg.wrapS = THREE.MirroredRepeatWrapping;
    starsjpg.wrapT = THREE.MirroredRepeatWrapping;


    const starsGeometry = new THREE.Geometry();
    for ( let i = 0; i < 50000; i ++ ) {
      let 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 );
    }
    const starsMaterial = new THREE.PointsMaterial( { color: 0xffffff } );
    const sparklestars = new THREE.Points( starsGeometry, starsMaterial );
    scene.add( sparklestars ); // (Three.js, n.d.)


    // EARTH Sphere - add earth texture map.
  	const earthloader = new THREE.TextureLoader();
  	earthloader.crossOrigin = '';
  	const earthjpg = earthloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/earthtexturemap.jpg');
  	const earthMaterial = new THREE.MeshPhongMaterial({map: earthjpg});
  	const earth = new THREE.Mesh(
  		   new THREE.SphereGeometry(earthradius, segments, rings),
  		   earthMaterial);
    earth.position.set(0, 0, 0);
    earth.rotation.y = 23.5;
    earth.receiveShadow = true;
    earth.castShadow = true;

     // MOON Sphere - add moon texture map.
  	const moonloader = new THREE.TextureLoader();
  	moonloader.crossOrigin = '';
  	const moonjpg = moonloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/moontexturemap.jpg');
  	const moonMaterial = new THREE.MeshPhongMaterial({map: moonjpg});
  	const moon = new THREE.Mesh(
  		   new THREE.SphereGeometry(moonradius, segments, rings),
  		   moonMaterial);
  	moon.position.set(-90, 0, 0);
    moon.receiveShadow = true;
    moon.castShadow = true;

    // ORBIT Line - create a circular line for the moon's orbit around the earth.
    const linematerial = new THREE.LineBasicMaterial();
    const circlegeometry = new THREE.CircleGeometry(3.2, 1000);
    circlegeometry.vertices.shift();
    const orbitpath = new THREE.Line(circlegeometry, linematerial);
    orbitpath.position.set(0.5, 5, 6);
    orbitpath.rotation.x = 2;


    // Create the orbit path and add it and the moon to the orbit group.
    const orbit = new THREE.Group();
    orbit.add(orbitpath);
    orbit.add(moon);


    // Add the earth and moon orbit group to the scene.
    scene.add(earth);
    scene.add(orbit);


  	// ANIMATION:

  	function animate() {
  		requestAnimationFrame(animate);

      sparklestars.rotation.y += 0.00005;
      sparklestars.rotation.x += 0.00001;
      earth.rotation.y += 0.001; // slow counterclockwise.
      moon.rotation.y += 0.0003; // counter clockwise at a rate the keeps the moon tidal locked.
      orbit.rotation.y += 0.005; // the moons orbit also tries to keep its near side facing the earth.

  		render();
  	}


    // RENDERING:

  	function render() {
  		//cameraControls.update();
  		renderer.render(scene, camera);
  	}
  	animate();


    /*
    References

    Cunningham, S. (2003). Computer Graphics: Programming, Problem Solving, and Visual Communication. Retrieved from https://my.uopeople.edu/pluginfile.php/389065/mod_resource/content/4/ComputerGraphics-SteveCunningham.pdf

    Three.js (n.d.). Three.js Docs. Retrieved from https://threejs.org/docs/#api/en/materials/PointsMaterial

    ThreeJSFundamentals.org (n.d.). Three.js Lights. Retrieved from https://threejsfundamentals.org/threejs/lessons/threejs-lights.html

    */
</script>

</html>
	<!DOCTYPE html>
	<html>

	<head>
	<!--<script src="https://getfirebug.com/firebug-lite-debug.js"></script>-->
	<meta name="description" content="Three.js Earth and Moon Orbit #2" />
	<meta charset="utf-8" />
	<title>Three.js Earth and Moon Orbit #2</title>
	<style>
	#container {
	background: #000000;
	width: 100%;
	height: 100%;
	}
	</style>
	<meta charset=utf-8 />
	<style id="jsbin-css">
	</style>
	</head>

	<body>
	<div id="container">
	</div>


	</body>
	<script>
	'use strict';
	</script>
	<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="https://cdnjs.cloudflare.com/ajax/libs/mathjs/5.4.2/math.min.js"></script>
	<script>

	// set the scene size
	const WIDTH = window.innerWidth, HEIGHT = window.innerHeight;

	// set some camera attributes
	const VIEW_ANGLE = 30, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 10000;

	// get the DOM element to attach to
	const $container = $('#container');

	// create a WebGL renderer, camera, and a scene

	const renderer = new THREE.WebGLRenderer();
	const scene = new THREE.Scene();
	let clock = new THREE.Clock();
	const camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
	// the camera starts at 0,0,0 so pull it back
	camera.position.z = 600;
	// add the camera to the scene
	scene.add(camera);

	// set up the camera controls so the user can rotate the scene with their mouse.
	const cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.autoRotate = false;

	// start the renderer
	renderer.setSize(WIDTH, HEIGHT);

	// attach the render-supplied DOM element
	$container.append(renderer.domElement);


	// LIGHTING:

	/* "a HemisphereLight takes a sky color and a ground color and just multplies
	the material's color between those 2 colors" (ThreeJSFundamentals.org, n.d.) */
	const hlightskyColor = 0x87CEFA; // coming from above - light blue
	const hlightgroundColor = 0x00BFFF; // coming from below - deep sky blue
	const hlightintensity = 0.3;
	const hemispherelight = new THREE.HemisphereLight(hlightskyColor, hlightgroundColor, hlightintensity);
	scene.add(hemispherelight);


	// a DirectionalLight light often represents the sun and we need it here to combine with the
	// hemisphere or ambient light to shade.
	const dlightcolor = 0xFFFACD;
	const dlightintensity = 1.2;
	const directionallight = new THREE.DirectionalLight(dlightcolor, dlightintensity);
	directionallight.position.set(20, 10, 10);
	directionallight.target.position.set(0, 0, 0); // light shines in direction of its target (deafults to origin)
	directionallight.castShadow = true;
	scene.add(directionallight);
	// shows a plane, to represent the light, and a line from the light to the target (ThreeJSFundamentals.org, n.d.)
	const dlighthelper = new THREE.DirectionalLightHelper(directionallight);
	scene.add(dlighthelper);


	// GEOMETRY:

	// set up the sphere properties.
	const segments = 32, rings = 32, earthradius = 45, moonradius = 10, starsradius = 100;


	// STAR FIELD - scene background.
	const starsloader = new THREE.TextureLoader();
	starsloader.crossOrigin = '';
	const starsjpg = starsloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/stars.jpg',
	function ( texture ) {
	var img = texture.image;
	bgWidth= img.width;
	bgHeight = img.height;
	}
	);
	// Add the background texture to the scene's background property.
	scene.background = starsjpg;
	// make sure the background image is resized to fill the scene.
	starsjpg.wrapS = THREE.MirroredRepeatWrapping;
	starsjpg.wrapT = THREE.MirroredRepeatWrapping;


	const starsGeometry = new THREE.Geometry();
	for ( let i = 0; i < 50000; i ++ ) {
	let 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 );
	}
	const starsMaterial = new THREE.PointsMaterial( { color: 0xffffff } );
	const sparklestars = new THREE.Points( starsGeometry, starsMaterial );
	scene.add( sparklestars ); // (Three.js, n.d.)


	// EARTH Sphere - add earth texture map.
	const earthloader = new THREE.TextureLoader();
	earthloader.crossOrigin = '';
	const earthjpg = earthloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/earthtexturemap.jpg');
	const earthMaterial = new THREE.MeshPhongMaterial({map: earthjpg});
	const earth = new THREE.Mesh(
	new THREE.SphereGeometry(earthradius, segments, rings),
	earthMaterial);
	earth.position.set(0, 0, 0);
	earth.rotation.y = 23.5;
	earth.receiveShadow = true;
	earth.castShadow = true;

	// MOON Sphere - add moon texture map.
	const moonloader = new THREE.TextureLoader();
	moonloader.crossOrigin = '';
	const moonjpg = moonloader.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/moontexturemap.jpg');
	const moonMaterial = new THREE.MeshPhongMaterial({map: moonjpg});
	const moon = new THREE.Mesh(
	new THREE.SphereGeometry(moonradius, segments, rings),
	moonMaterial);
	moon.position.set(-90, 0, 0);
	moon.receiveShadow = true;
	moon.castShadow = true;

	// ORBIT Line - create a circular line for the moon's orbit around the earth.
	const linematerial = new THREE.LineBasicMaterial();
	const circlegeometry = new THREE.CircleGeometry(3.2, 1000);
	circlegeometry.vertices.shift();
	const orbitpath = new THREE.Line(circlegeometry, linematerial);
	orbitpath.position.set(0.5, 5, 6);
	orbitpath.rotation.x = 2;


	// Create the orbit path and add it and the moon to the orbit group.
	const orbit = new THREE.Group();
	orbit.add(orbitpath);
	orbit.add(moon);


	// Add the earth and moon orbit group to the scene.
	scene.add(earth);
	scene.add(orbit);


	// ANIMATION:

	function animate() {
	requestAnimationFrame(animate);

	sparklestars.rotation.y += 0.00005;
	sparklestars.rotation.x += 0.00001;
	earth.rotation.y += 0.001; // slow counterclockwise.
	moon.rotation.y += 0.0003; // counter clockwise at a rate the keeps the moon tidal locked.
	orbit.rotation.y += 0.005; // the moons orbit also tries to keep its near side facing the earth.

	render();
	}


	// RENDERING:

	function render() {
	//cameraControls.update();
	renderer.render(scene, camera);
	}
	animate();




	/*
	References

	Cunningham, S. (2003). Computer Graphics: Programming, Problem Solving, and Visual Communication. Retrieved from https://my.uopeople.edu/pluginfile.php/389065/mod_resource/content/4/ComputerGraphics-SteveCunningham.pdf

	Three.js (n.d.). Three.js Docs. Retrieved from https://threejs.org/docs/#api/en/materials/PointsMaterial

	ThreeJSFundamentals.org (n.d.). Three.js Lights. Retrieved from https://threejsfundamentals.org/threejs/lessons/threejs-lights.html

	*/
	</script>

	</html>