Created
October 14, 2019 00:58
-
-
Save TribeMeladee/acc6df809659c5ad25e5e6088ef318a7 to your computer and use it in GitHub Desktop.
Assignment UNIT # 6, Earth and Moon CS4406 Computer Graphics - Exercise #6 // source https://jsbin.com/zobujov
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment