SabrinaMarkon · March 23, 2019 04:36
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <!--<script src="https://getfirebug.com/firebug-lite-debug.js"></script>-->
 <meta name="description" content="Three.js My Pink Doughnuts" />
  	<meta charset="utf-8" />
 	<title>Three.js My Pink Doughnuts</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 = 800, HEIGHT = 800;

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

 	// 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(); // clock is not a constant because we need to reset it during the scale animation.
 	const camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
 	 // the camera starts at 0,0,0 so pull it back
 	camera.position.z = 500;    	
 	// add the camera to the scene
 	scene.add(camera)
   
 	// set up the camera controls.  Please keep in mind that what this does is move the entire scene around.
 	// because the entire scene is moving the position of the camera and lights in relation to objects within 
 	// the scene doesn't change so the lighting on the surface of the object(s) will not change either
 	const cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
 	cameraControls.addEventListener( 'mousemove', renderer );
    cameraControls.autoRotate = false;
      
 	// start the renderer
 	renderer.setSize(WIDTH, HEIGHT);

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

 	// ----------------------------------------------------------------------------------------
 	//  END OF THE STANDARD CODE FOR THE ASSIGNMENT
 	//  Following this is where you must place your own custom code to complete the assignment
 	// ----------------------------------------------------------------------------------------

  // LIGHTING
    
   
  // a PointLight is a light that sits at a point and shoots light in all 
  // directions from that point" (ThreeJSFundamentals.org, n.d.)
  // IF there is no point light and you use the mouse to orbit the donuts you will see that the light stays
  // shining on the same side of the donut.

  const plightcolor = 0xFFFFFF;
  const plightintensity = 1;
  const pointlight = new THREE.PointLight(plightcolor, plightintensity);
  pointlight.position.set(0, 75, 60);
  scene.add(pointlight);  
  // shows a plane, to represent the light, and a line from the light to the target (ThreeJSFundamentals.org, n.d.)
  // const plighthelper = new THREE.PointLightHelper(pointlight);
  // scene.add(plighthelper);

    
  /*
  some ambient light for a nice mood while we eat our donuts?
  // "The AmbientLight effectively just multiply's the material's color 
  // by the light's color times the intensity" (ThreeJSFundamentals.org, n.d.)
  const ambientlight = new THREE.AmbientLight(0x222222);
  scene.add(ambientlight);
  */
    
  /* "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 = 0xFFB6C1;  // coming from above - light pink
  const hlightgroundColor = 0xFF69B4;  // coming from below - hot pink
  const hlightintensity = 0.4;
  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, otherwise the donuts are flat looking.
  const dlightcolor = 0xFFC0CB;
  const dlightintensity = 1;
  const directionallight = new THREE.DirectionalLight(dlightcolor, dlightintensity);
  directionallight.position.set(0, 10, 0);
  directionallight.target.position.set(0, 0, 0); // light shines in direction of its target (deafults to origin)
  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);
    
 	// set up the Donut Properties
 	const radius = 25, tube = 14, radialSegments = 25, tubularSegments = 66, arc = Math.PI * 2;

 	// create a new mesh with torus geometry for each of the four donuts!
 	// we will cover the torusMaterial next! #FFC0CB

 	// TORUS #1 - DONUT #1 - TRANSPARENT TORUS - we can see the contours of the donut 'hole' when it rotates
  // Demonstrate transparency.
 	const donutMaterial1 = new THREE.MeshPhongMaterial({color: 0xFFC0CB, opacity: 0.3, transparent: true}); // donut/torus #1 material
 	const donut1 = new THREE.Mesh(
 	   new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
 	   donutMaterial1);
     donut1.position.set(50, 50, 0);

    
 	// TORUS #2 - DONUT #2 - TEXTURE TORUS
 	// Demonstrates texture applied as the color.   
 	const loader2 = new THREE.TextureLoader();
 	loader2.crossOrigin = '';
 	const donutsprinkles = loader2.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/pinkdonutwithsprinkles.png');
 	const donutMaterial2 = new THREE.MeshPhongMaterial({map: donutsprinkles});  // donut/torus #2 material
 	const donut2 = new THREE.Mesh(
 		   new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
 		   donutMaterial2);
 		   donut2.position.set(-50, 50, 0);
    
 	// TORUS #3 - DONUT #3 - SOLID COLOR TORUS (0xFFC0CB - Pink) - Using Phong so shading is shown
  // Demonstrates a solid basic color 
 	const donutMaterial3 = new THREE.MeshPhongMaterial({color: 0xFFC0CB}); // donut/torus #3 material
  const donut3 = new THREE.Mesh(
       new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
       donutMaterial3);
       donut3.position.set(-50, -50, 0);
    
 	// TORUS #4 - DONUT #4 - SHINY BRIGHTLY LIT TORUS - USing Phong with shininess.
  // Demonstrates the reflection of the local light source. 
 	const donutMaterial4 = new THREE.MeshPhongMaterial({color: 0xFF69B4, shininess: 150}); // donut/torus #4 material
 	const donut4 = new THREE.Mesh(
       new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
       donutMaterial4);
       donut4.position.set(50, -50, 0);
    	
    // Add all the donuts to the scene
    scene.add(donut1);
    scene.add(donut2);
    scene.add(donut3);
    scene.add(donut4);
    
      
 	// standard functions for rendering the scene.  Notice how we have the animate function 
 	// which submits a call to requestAnimationFrame to call animate.   This creates a loop
 	// that will render the scene again whenever something within the scene changes.
 	function animate() {
 		requestAnimationFrame(animate);
    
    ////////////////////////// ROTATE DONUS! 
    
    //donut1.rotation.y += 0.01;
    donut2.rotation.x += 0.01;
    //donut3.rotation.y -= 0.01;
    donut4.rotation.x -= 0.01;
   
    
    ////////////////////////// SCALE AND TRANSLATE DONUTS!
    
    let timer = clock.getElapsedTime();

    if (timer >= 10.0)
    {
      // if timer is greater that or equal to 10, scale the donuts larger.
      clock = new THREE.Clock;
      donut1.scale.set(1,1,1);
      //donut2.scale.set(1,1,1);
      donut3.scale.set(1,1,1);
      //donut4.scale.set(1,1,1);
    }
    else
    {
      // SCALE the donuts smaller.
      donut1.scale.x = 1-(timer/5.0);
      donut1.scale.y = 1-(timer/5.0);
      donut1.scale.z = 1-(timer/5.0);   
      //donut2.scale.x = 1-(timer/5.0);
      //donut2.scale.y = 1-(timer/5.0);
      //donut2.scale.z = 1-(timer/5.0); 
      donut3.scale.x = 1-(timer/5.0);
      donut3.scale.y = 1-(timer/5.0);
      donut3.scale.z = 1-(timer/5.0); 
      //donut4.scale.x = 1-(timer/5.0);
      //donut4.scale.y = 1-(timer/5.0);
      //donut4.scale.z = 1-(timer/5.0); 
      
      // TRANSLATE the donuts along the x axis.
        if (timer <= 5) {
          //donut1.position.x += 0.1;
          donut2.position.x -= 0.2;
          //donut3.position.x -= 0.1;
          donut4.position.x += 0.2;   
        } else {
          //donut1.position.x -= 0.1;
          donut2.position.x += 0.2;
          //donut3.position.x += 0.1;
          donut4.position.x -= 0.2;         

        }

      
    }  
    
 		render();
 	}

 	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

  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 My Pink Doughnuts" />
	<meta charset="utf-8" />
	<title>Three.js My Pink Doughnuts</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 = 800, HEIGHT = 800;

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

	// 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(); // clock is not a constant because we need to reset it during the scale animation.
	const camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
	// the camera starts at 0,0,0 so pull it back
	camera.position.z = 500;
	// add the camera to the scene
	scene.add(camera)

	// set up the camera controls. Please keep in mind that what this does is move the entire scene around.
	// because the entire scene is moving the position of the camera and lights in relation to objects within
	// the scene doesn't change so the lighting on the surface of the object(s) will not change either
	const cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.addEventListener( 'mousemove', renderer );
	cameraControls.autoRotate = false;

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

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

	// ----------------------------------------------------------------------------------------
	// END OF THE STANDARD CODE FOR THE ASSIGNMENT
	// Following this is where you must place your own custom code to complete the assignment
	// ----------------------------------------------------------------------------------------

	// LIGHTING


	// a PointLight is a light that sits at a point and shoots light in all
	// directions from that point" (ThreeJSFundamentals.org, n.d.)
	// IF there is no point light and you use the mouse to orbit the donuts you will see that the light stays
	// shining on the same side of the donut.

	const plightcolor = 0xFFFFFF;
	const plightintensity = 1;
	const pointlight = new THREE.PointLight(plightcolor, plightintensity);
	pointlight.position.set(0, 75, 60);
	scene.add(pointlight);
	// shows a plane, to represent the light, and a line from the light to the target (ThreeJSFundamentals.org, n.d.)
	// const plighthelper = new THREE.PointLightHelper(pointlight);
	// scene.add(plighthelper);


	/*
	some ambient light for a nice mood while we eat our donuts?
	// "The AmbientLight effectively just multiply's the material's color
	// by the light's color times the intensity" (ThreeJSFundamentals.org, n.d.)
	const ambientlight = new THREE.AmbientLight(0x222222);
	scene.add(ambientlight);
	*/

	/* "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 = 0xFFB6C1; // coming from above - light pink
	const hlightgroundColor = 0xFF69B4; // coming from below - hot pink
	const hlightintensity = 0.4;
	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, otherwise the donuts are flat looking.
	const dlightcolor = 0xFFC0CB;
	const dlightintensity = 1;
	const directionallight = new THREE.DirectionalLight(dlightcolor, dlightintensity);
	directionallight.position.set(0, 10, 0);
	directionallight.target.position.set(0, 0, 0); // light shines in direction of its target (deafults to origin)
	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);

	// set up the Donut Properties
	const radius = 25, tube = 14, radialSegments = 25, tubularSegments = 66, arc = Math.PI * 2;

	// create a new mesh with torus geometry for each of the four donuts!
	// we will cover the torusMaterial next! #FFC0CB

	// TORUS #1 - DONUT #1 - TRANSPARENT TORUS - we can see the contours of the donut 'hole' when it rotates
	// Demonstrate transparency.
	const donutMaterial1 = new THREE.MeshPhongMaterial({color: 0xFFC0CB, opacity: 0.3, transparent: true}); // donut/torus #1 material
	const donut1 = new THREE.Mesh(
	new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
	donutMaterial1);
	donut1.position.set(50, 50, 0);


	// TORUS #2 - DONUT #2 - TEXTURE TORUS
	// Demonstrates texture applied as the color.
	const loader2 = new THREE.TextureLoader();
	loader2.crossOrigin = '';
	const donutsprinkles = loader2.load('https://s3-us-west-2.amazonaws.com/sabrinamarkon-images/images/pinkdonutwithsprinkles.png');
	const donutMaterial2 = new THREE.MeshPhongMaterial({map: donutsprinkles}); // donut/torus #2 material
	const donut2 = new THREE.Mesh(
	new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
	donutMaterial2);
	donut2.position.set(-50, 50, 0);

	// TORUS #3 - DONUT #3 - SOLID COLOR TORUS (0xFFC0CB - Pink) - Using Phong so shading is shown
	// Demonstrates a solid basic color
	const donutMaterial3 = new THREE.MeshPhongMaterial({color: 0xFFC0CB}); // donut/torus #3 material
	const donut3 = new THREE.Mesh(
	new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
	donutMaterial3);
	donut3.position.set(-50, -50, 0);

	// TORUS #4 - DONUT #4 - SHINY BRIGHTLY LIT TORUS - USing Phong with shininess.
	// Demonstrates the reflection of the local light source.
	const donutMaterial4 = new THREE.MeshPhongMaterial({color: 0xFF69B4, shininess: 150}); // donut/torus #4 material
	const donut4 = new THREE.Mesh(
	new THREE.TorusGeometry(radius, tube, radialSegments, tubularSegments, arc),
	donutMaterial4);
	donut4.position.set(50, -50, 0);

	// Add all the donuts to the scene
	scene.add(donut1);
	scene.add(donut2);
	scene.add(donut3);
	scene.add(donut4);


	// standard functions for rendering the scene. Notice how we have the animate function
	// which submits a call to requestAnimationFrame to call animate. This creates a loop
	// that will render the scene again whenever something within the scene changes.
	function animate() {
	requestAnimationFrame(animate);

	////////////////////////// ROTATE DONUS!

	//donut1.rotation.y += 0.01;
	donut2.rotation.x += 0.01;
	//donut3.rotation.y -= 0.01;
	donut4.rotation.x -= 0.01;


	////////////////////////// SCALE AND TRANSLATE DONUTS!

	let timer = clock.getElapsedTime();

	if (timer >= 10.0)
	{
	// if timer is greater that or equal to 10, scale the donuts larger.
	clock = new THREE.Clock;
	donut1.scale.set(1,1,1);
	//donut2.scale.set(1,1,1);
	donut3.scale.set(1,1,1);
	//donut4.scale.set(1,1,1);
	}
	else
	{
	// SCALE the donuts smaller.
	donut1.scale.x = 1-(timer/5.0);
	donut1.scale.y = 1-(timer/5.0);
	donut1.scale.z = 1-(timer/5.0);
	//donut2.scale.x = 1-(timer/5.0);
	//donut2.scale.y = 1-(timer/5.0);
	//donut2.scale.z = 1-(timer/5.0);
	donut3.scale.x = 1-(timer/5.0);
	donut3.scale.y = 1-(timer/5.0);
	donut3.scale.z = 1-(timer/5.0);
	//donut4.scale.x = 1-(timer/5.0);
	//donut4.scale.y = 1-(timer/5.0);
	//donut4.scale.z = 1-(timer/5.0);

	// TRANSLATE the donuts along the x axis.
	if (timer <= 5) {
	//donut1.position.x += 0.1;
	donut2.position.x -= 0.2;
	//donut3.position.x -= 0.1;
	donut4.position.x += 0.2;
	} else {
	//donut1.position.x -= 0.1;
	donut2.position.x += 0.2;
	//donut3.position.x += 0.1;
	donut4.position.x -= 0.2;

	}


	}

	render();
	}

	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

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

	*/

	</script>
	</html>