TribeMeladee/index.html

## index.html
<!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="https://getfirebug.com/firebug-lite-debug.js"></script>
    <meta name="description" content="CS4406 Computer Graphics - Exercise #6" />
    <meta charset="utf-8" />
    <title>Assignment UNIT # 6,  Earth and Moon</title>
    <style>
      #container {
        background: #ffffff;
      }
    </style>
    <meta charset=utf-8 />
    <title></title>
  </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/109/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="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/Detector.js"></script>

  <script type="text/javascript">

    // set the scene size
    var WIDTH = 800,
        HEIGHT = 800;

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

    // get the DOM element to attach to
    var $container = $('#container');
    // create a WebGL renderer
    var renderer = new THREE.WebGLRenderer({ antialias: true });

    //create scene
    var scene = new THREE.Scene();
    var clock = new THREE.Clock();

    //create camera and add to scene
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.z = 600;
    scene.add(camera)

    //disable rotating camera
    var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
    cameraControls.enabled = false;

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

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

    //Create a new ambient light - only used when working on the model
    var light = new THREE.AmbientLight( 0x888888 )
    //scene.add( light )

    //Create a new directional light
    var light = new THREE.DirectionalLight( 0xfdfcf0, 1 )
    light.position.set(100,0,80)
    light.castShadow = true;
    light.shadowDarkness = 10.5;
    light.shadowCameraVisible=true;
    scene.add( light )

    //I use this to see where the light is pointing
    //var helper = new THREE.DirectionalLightHelper( light, 5 );
    //scene.add( helper );


    //Define the objects that will be the earth and the moon
    //Create geometry and material for the earth
    var earthGeometry = new THREE.SphereGeometry( 35, 50, 50 );
    var earthMaterial = new THREE.MeshPhongMaterial({
      map: new THREE.TextureLoader().load("https://upload.wikimedia.org/wikipedia/commons/c/cf/WorldMap-A_non-Frame.png"),
      color: 0xaaaaaa,
      specular: 0x333333,
      shininess: 10
    });
    //Build earth mesh using our geometry and material
    var earth = new THREE.Mesh(earthGeometry, earthMaterial);
    //add the earth mesh to the scene
    scene.add(earth);
    earth.receiveShadow = true;
    earth.castShadow = true;

    //Create geometry and material for the earth
    var moonGeometry = new THREE.SphereGeometry( 13, 50, 50 );
    var moonMaterial = new THREE.MeshPhongMaterial({
      map: new THREE.TextureLoader().load("https://upload.wikimedia.org/wikipedia/commons/d/db/Moonmap_from_clementine_data.png"),
      color: 0xaaaaaa,
      specular: 0x333333,
      shininess: 10
    });
    //Build earth mesh using our geometry and material
    var moon = new THREE.Mesh(moonGeometry, moonMaterial);
    // place the moon in a position away from the earth
    moon.position.x=70
    //add the earth mesh to the scene
    scene.add(moon);
    moon.receiveShadow = true;
    moon.castShadow = true;

    var r = 70;
    var theta = 0;
    var dTheta = 0.3 * Math.PI / 100;

    function animate() {
      requestAnimationFrame(animate);
      render();
    }
    function render() {
      cameraControls.update();
      earth.rotation.y +=0.001
      moon.rotation.y -=0.03

      //Increment theta, and update moon x and y
      //position based off new theta value
      theta -= dTheta;
      moon.position.x = r * Math.cos(theta);
      moon.position.z = r * Math.sin(theta);

      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="CS4406 Computer Graphics - Exercise #6" />
	<meta charset="utf-8" />
	<title>Assignment UNIT # 6, Earth and Moon</title>
	<style>
	#container {
	background: #ffffff;
	}
	</style>
	<meta charset=utf-8 />
	<title></title>
	</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/109/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="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/Detector.js"></script>

	<script type="text/javascript">

	// set the scene size
	var WIDTH = 800,
	HEIGHT = 800;

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

	// get the DOM element to attach to
	var $container = $('#container');
	// create a WebGL renderer
	var renderer = new THREE.WebGLRenderer({ antialias: true });

	//create scene
	var scene = new THREE.Scene();
	var clock = new THREE.Clock();

	//create camera and add to scene
	var camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
	camera.position.z = 600;
	scene.add(camera)

	//disable rotating camera
	var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
	cameraControls.enabled = false;

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

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

	//Create a new ambient light - only used when working on the model
	var light = new THREE.AmbientLight( 0x888888 )
	//scene.add( light )

	//Create a new directional light
	var light = new THREE.DirectionalLight( 0xfdfcf0, 1 )
	light.position.set(100,0,80)
	light.castShadow = true;
	light.shadowDarkness = 10.5;
	light.shadowCameraVisible=true;
	scene.add( light )

	//I use this to see where the light is pointing
	//var helper = new THREE.DirectionalLightHelper( light, 5 );
	//scene.add( helper );


	//Define the objects that will be the earth and the moon
	//Create geometry and material for the earth
	var earthGeometry = new THREE.SphereGeometry( 35, 50, 50 );
	var earthMaterial = new THREE.MeshPhongMaterial({
	map: new THREE.TextureLoader().load("https://upload.wikimedia.org/wikipedia/commons/c/cf/WorldMap-A_non-Frame.png"),
	color: 0xaaaaaa,
	specular: 0x333333,
	shininess: 10
	});
	//Build earth mesh using our geometry and material
	var earth = new THREE.Mesh(earthGeometry, earthMaterial);
	//add the earth mesh to the scene
	scene.add(earth);
	earth.receiveShadow = true;
	earth.castShadow = true;

	//Create geometry and material for the earth
	var moonGeometry = new THREE.SphereGeometry( 13, 50, 50 );
	var moonMaterial = new THREE.MeshPhongMaterial({
	map: new THREE.TextureLoader().load("https://upload.wikimedia.org/wikipedia/commons/d/db/Moonmap_from_clementine_data.png"),
	color: 0xaaaaaa,
	specular: 0x333333,
	shininess: 10
	});
	//Build earth mesh using our geometry and material
	var moon = new THREE.Mesh(moonGeometry, moonMaterial);
	// place the moon in a position away from the earth
	moon.position.x=70
	//add the earth mesh to the scene
	scene.add(moon);
	moon.receiveShadow = true;
	moon.castShadow = true;

	var r = 70;
	var theta = 0;
	var dTheta = 0.3 * Math.PI / 100;

	function animate() {
	requestAnimationFrame(animate);
	render();
	}
	function render() {
	cameraControls.update();
	earth.rotation.y +=0.001
	moon.rotation.y -=0.03

	//Increment theta, and update moon x and y
	//position based off new theta value
	theta -= dTheta;
	moon.position.x = r * Math.cos(theta);
	moon.position.z = r * Math.sin(theta);

	renderer.render(scene, camera);
	}
	animate();
	</script>
	</html>
No results found