SabrinaMarkon · March 23, 2019 04:23
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
 <head>
 <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
 <meta name="description" content="Three.js Ruffled Paper Spheres" />
  	<meta charset="utf-8" />
 	<style>
 		#container {
 			background: #000000;
 			width: 100%;
 			height: 100%;
 		}
  </style>
 <meta charset=utf-8 />
 <title>Three.js Ruffled Paper Spheres</title>
  
 <style id="jsbin-css">

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


 </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 type="text/javascript">

 	// set the scene size
 	var WIDTH = 900, HEIGHT = 500;

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

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

 	// create a WebGL renderer, camera, and a scene
      
    var renderer = new THREE.WebGLRenderer();
 	var scene = new THREE.Scene();
 	var clock = new THREE.Clock();
 	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
 	 // the camera starts at 0,0,0 so pull it back
 	camera.position.z = 200;    	
 	// 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
 	var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
 	cameraControls.addEventListener( 'mousemove', renderer );
    cameraControls.autoRotate = true;
      
 	// 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
 	// ----------------------------------------------------------------------------------------

 	// create a point light
    var areaLight = new THREE.RectAreaLight( 0xffffff, 1);

 	// add to the scene
    scene.add(areaLight);
      
 	// create the sphere's material
 	var sphereMaterial = new THREE.MeshNormalMaterial();

 	// set up the sphere vars
 	var radius = 55, segments = 32, rings = 32;

 	// create a new mesh with sphere geometry -
 	// we will cover the sphereMaterial next!
 	var sphere1 = new THREE.Mesh(
 	   new THREE.SphereGeometry(radius, segments, rings, 0, 90, 0, 360),
 	   sphereMaterial);

    var sphere2 = new THREE.Mesh(
       new THREE.SphereGeometry(20, segments, rings, 0, 90, 0, 360),
       sphereMaterial);
     
    sphere2.position.x = 140;
    sphere2.position.y = 40;

    sphere2.rotation.x = Math.random() * 2 * Math.PI;
    sphere2.rotation.y = 120;
 	
      // add the sphere to the scene
 	scene.add(sphere1);
    scene.add(sphere2);
    
    //var torus = new THREE.TorusKnotGeometry( radius, 6, 12, 12, 90 );
    
    //scene.add(torus);
      
 	// 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);
 		render();
 	}

 	function render() {
 		cameraControls.update();
 		renderer.render(scene, camera);
 	}
 	animate();
 	</script>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
	<meta name="description" content="Three.js Ruffled Paper Spheres" />
	<meta charset="utf-8" />
	<style>
	#container {
	background: #000000;
	width: 100%;
	height: 100%;
	}
	</style>
	<meta charset=utf-8 />
	<title>Three.js Ruffled Paper Spheres</title>

	<style id="jsbin-css">

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


	</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 type="text/javascript">

	// set the scene size
	var WIDTH = 900, HEIGHT = 500;

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

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

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

	var renderer = new THREE.WebGLRenderer();
	var scene = new THREE.Scene();
	var clock = new THREE.Clock();
	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
	// the camera starts at 0,0,0 so pull it back
	camera.position.z = 200;
	// 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
	var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.addEventListener( 'mousemove', renderer );
	cameraControls.autoRotate = true;

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

	// create a point light
	var areaLight = new THREE.RectAreaLight( 0xffffff, 1);

	// add to the scene
	scene.add(areaLight);

	// create the sphere's material
	var sphereMaterial = new THREE.MeshNormalMaterial();

	// set up the sphere vars
	var radius = 55, segments = 32, rings = 32;

	// create a new mesh with sphere geometry -
	// we will cover the sphereMaterial next!
	var sphere1 = new THREE.Mesh(
	new THREE.SphereGeometry(radius, segments, rings, 0, 90, 0, 360),
	sphereMaterial);

	var sphere2 = new THREE.Mesh(
	new THREE.SphereGeometry(20, segments, rings, 0, 90, 0, 360),
	sphereMaterial);

	sphere2.position.x = 140;
	sphere2.position.y = 40;

	sphere2.rotation.x = Math.random() * 2 * Math.PI;
	sphere2.rotation.y = 120;

	// add the sphere to the scene
	scene.add(sphere1);
	scene.add(sphere2);

	//var torus = new THREE.TorusKnotGeometry( radius, 6, 12, 12, 90 );

	//scene.add(torus);

	// 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);
	render();
	}

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