Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<head>
<meta name="description" content="Assignment 6" />
    <meta charset="utf-8" />
  <title>The Earth and Moon  </title>
  
<!--  Using CSS to create a background for the css molecule-->  
  <style>
    #container {
      background: #000000;
      width: 100%;
      height: 100%;
    }
  </style>
<meta charset=utf-8 />  
<style id="jsbin-css"></style>
</head>
<body>
<div id="container"></div>
    <!-- Adding JS libraries--> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> 
<script src="http://uopeopleweb.com/js/math.js"></script>
    <script src="http://uopeopleweb.com/js/Detector.js"></script>   
  <script src="http://uopeopleweb.com/js/dat.gui.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r58/three.min.js"></script>
  <script src="http://uopeopleweb.com/js/OrbitControls.js"></script>
    
    <script type="text/javascript">
    
    // Define and initialize static values for camera and scene
    var WIDTH = 600, HEIGHT =600;
​
    // Camera view angle, aspect width and height are being defined
    var VIEW_ANGLE = 45, ASPECT = WIDTH / HEIGHT, NEAR = 1, FAR = 1000;
​
    
    var $container = $('#container');
 
    var renderer = new THREE.CanvasRenderer();   
​
    var scene = new THREE.Scene();
    var clock = new THREE.Clock();
​
    var camera = new THREE.PerspectiveCamera(VIEW_ANGLE,ASPECT,NEAR,FAR);
​
    
    // The camera position has been set and camera has been assign to the scene
    camera.position.z = 200; 
    camera.position.y = 200;
    camera.rotation.order = 'YXZ';
      
    // Add camera to the scene
    scene.add(camera)
   
    // setup renderer parameters
        renderer.shadowMapEnabled      = true;
        renderer.shadowMapSoft         = true;
        renderer.shadowMapType         = THREE.BasicShadowMap;
        renderer.shadowMapAutoUpdate   = true;
        renderer.shadowCameraNear      = 50;
        renderer.shadowCameraFar       = 300;
        renderer.shadowCameraFov       = 160;
          
        renderer.shadowMapBias         = 0.002;
        renderer.shadowMapDarkness     = 0.5;
        renderer.shadowMapWidth        = 1000;
        renderer.shadowMapHeight       = 1000;   
           
    
    // Setting up the red sphere and rendering
    var cameraControls = new THREE.OrbitControls(camera, renderer.domElement);
    cameraControls.addEventListener( 'mousemove', renderer );
    cameraControls.userRotate = true;
    
    renderer.setSize(WIDTH, HEIGHT);
     $container.append(renderer.domElement); 
      
      
     
   var materialSphereSmall = new THREE.MeshPhongMaterial( { ambient: 0x00ffff, color:0xffffff, specular: 0xffffff, shininess: 60,wireframe: false, map: Texture 2 } );   
      
   var Texture1 = new THREE.Texture();
   var loader = new THREE.ImageLoader();
    
   loader.addEventListener( 'load', function ( event ) {
                Texture1.image = event.content;
                Texture1.needsUpdate = true;
        } );
     
  loader.load( 'http://simpletruthsforhealthyliving.com/js/earth.jpg' );
      
      
   var Texture2 = new THREE.Texture();
   var loader = new THREE.ImageLoader();
    
   loader.addEventListener( 'load', function ( event ) {
   Texture2.image = event.content;
   Texture2.needsUpdate = true;
        } );
     
   loader.load( 'http://simpletruthsforhealthyliving.com/js/moon.jpg' );
       
      
  
       
   var center =  new THREE.SphereGeometry(20,20,20);
   var materialSphereCenter = new THREE.MeshPhongMaterial( { ambient: 0xee0011, color:0xff0000, specular: 0xee0000, shininess: 70,wireframe: false, map :Texture1 } );  
    centralSphere = new THREE.Mesh(center, materialSphereCenter);
    centralSphere.position.z        = 0;
    centralSphere.position.x        = 0;
    centralSphere.position.y        = 0;
   
    scene.add(centralSphere);
            
    
    
​
    var hydrogenAtom   =  new THREE.SphereGeometry(10, 10, 10);
     
    // Placing positions for the varying spheres
    var sphere1 =  new THREE.SphereGeometry(10,10,10);
   meshAtoms1 = new THREE.Mesh(sphere1, materialSphereSmall);
    meshAtoms1.position.z = 0;
    meshAtoms1.position.x = 0;
    meshAtoms1.position.y =43;
    meshAtoms1.receiveShadow = true;
    meshAtoms1.castShadow =true;
      
      
   hydrogenAtom1 = new THREE.Mesh(hydrogenAtom, materialSphereSmall);
    hydrogenAtom1.position.y =-20;
    hydrogenAtom1.position.z = 22;
    hydrogenAtom1.position.x = 31;   
    hydrogenAtom1.receiveShadow = true;
    hydrogenAtom1.castShadow =true;
      
    // Atom
    hydrogenAtom2 = new THREE.Mesh(hydrogenAtom, materialSphereSmall);
    hydrogenAtom2.position.y =-20;
    hydrogenAtom2.position.z = 0;
    hydrogenAtom2.position.x = -40; 
    hydrogenAtom2.receiveShadow = true;
    hydrogenAtom2.castShadow =true;
​
    // Atom
    hydrogenAtom3 = new THREE.Mesh(hydrogenAtom, materialSphereSmall);
    hydrogenAtom3.position.y = -20;
    hydrogenAtom3.position.z = -45;
    hydrogenAtom3.position.x =  0;  
    hydrogenAtom3.receiveShadow = true;
    hydrogenAtom3.castShadow =true; 
    
   
   // Plane
    var  planeMaterial = new THREE.MeshBasicMaterial( { color: 0xeeeeee, wireframe: false, side: THREE.DoubleSide } );
    var plane = new THREE.PlaneGeometry(300, 300, 10, 10);
    planeMesh = new THREE.Mesh(plane, planeMaterial);
    plane.overdraw = true;
    planeMesh.position.y += -80;
    planeMesh.rotation.x = Math.PI / 2;
    planeMesh.receiveShadow = true;
​
    mesh = new THREE.Object3D();
    
    /* adding the various scenes*/
      
  
    mesh = new THREE.Object3D();
   
    mesh.add(hydrogenAtom3);   
   
    scene.add(mesh);
    
   cameraControls.center =  new THREE.Vector3(mesh.position.x, mesh.position.y, mesh.position.z);
   scene.add(planeMesh);
   
      
   // pointlight 
   var pointLight = new THREE.PointLight();
   pointLight.position.set(10, 60, -40);
   pointLight.castShadow = true;
   pointLight.shadowBias = -0.005;
   scene.add(pointLight);
      
   // Directional light
   var theLight = new THREE.DirectionalLight( 0xffffff );
   theLight.position.set( 0, 10, 2 ).normalize();
   theLight.target.position.set(0, 0, 0);
   theLight.castShadow = true;
   theLight.intensity = 1;
   theLight.shadowDarkness = 0.5;
   scene.add(theLight);  
   
   // Ambient light
   var ambientLight = new THREE.AmbientLight(0x111111);
   scene.add(ambientLight);  
       
      
​
      
    function animate() {
        
       mesh.rotation.y += 0.1;
​
      
       requestAnimationFrame(animate);
       render();
      
    }
​
    function render() {
     
        cameraControls.update();
        parent = new THREE.Object3D();
        scene.add( parent );
        renderer.render(scene, camera);
      
    }
​
    animate();
      
    </script>
  </body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
parisempresspro
0viewers