title: How can I render an 'atmosphere' over a rendering of the Earth in Three.js?
body: <p>For the past few days, I've been trying to get Three.js texturing to work. The problem I've been having is that my browser was blocking textures from loading, which was solved by following the instructions <a href="https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally" rel="noreferrer">here</a>.</p>
  
  <p>Anyways, I'm making a space-navigator game for one of my classes that demonstrates navigating spacecraft through space. So, I'm rendering a bunch of planets, the Earth being one of them. I've included a picture of my Earth rendering below. It looks okay, but what I'm trying to do is make it look more realistic by adding an 'atmosphere' around the planet.</p>
  
  <p>I've looked around, and I've found some really <a href="http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html" rel="noreferrer">neat looking creations</a> that deal with glow, but I don't think they apply to my situation, unfortunately.</p>
  
  <p>And here's the code that adds the earth to my scene (it's a modified version of code I got from a Three.js tutorial):</p>
  
  <pre><code>    function addEarth(x,y){
  
          var sphereMaterial =
          new THREE.MeshLambertMaterial({
              //color: 0x0000ff,
              map: earthTexture
          });
  
          // set up the sphere vars
          var radius = 75;
          segments = 16;
          rings = 16;
  
          // create a new mesh with
          // sphere geometry - we will cover
          // the sphereMaterial next!
          earth = new THREE.Mesh(
  
          new THREE.SphereGeometry(
          radius,
          segments,
          rings),
  
          sphereMaterial);
  
          earth.position.x = x;
          earth.position.y = y;
  
          // add the sphere to the scene
          scene.add(earth);
      }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/nQGC4.png" alt="enter image description here"></p>