title: Mapping an image onto a sphere in Three.js
body: <p>I'm currently using Three.js to try and create something.  I've got a sphere, and I'm trying to map the eyeball image <a href="http://www.filterforge.com/filters/1174.jpg" rel="nofollow noreferrer">here</a> onto it.</p>
  <p>The problem I have is that the result looks like this:</p>
  <p><img src="https://i.stack.imgur.com/Lr4C9.jpg" alt="Enter image description here" /></p>
  <p>How can I get it to map properly without looking stretched?</p>
  <p>My code for creating the sphere and mapping the texture is below:</p>
  <pre><code>var geometry = new THREE.SphereGeometry(0.5,100,100);
  var material = new THREE.MeshPhongMaterial( { map: THREE.ImageUtils.loadTexture('eyeballmap.jpg',THREE.SphericalRefractionMapping) } );
  var eyeball = new THREE.Mesh( geometry, material );
  eyeball.overdraw = true;
  eyeball.castShadow = true;
  scene.add( eyeball );
  </code></pre>