title: Cannot load textures
body: <p>I'm struggleing with texture load issues. 
  All I see is a black sphere. :(</p>
  
  <p>Any help would be awesome! Do i make something wrong?
  Browser downloads the image, no issues on the console.</p>
  
  <p>Checked in every browser with the same result.
  OS: Mac 10.8.2</p>
  
  <p>Here is my code:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;script src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;  
      &lt;script src="js/three.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
      &lt;div id="container"&gt;
  
      &lt;/div&gt;
  
  
      &lt;script&gt;
          function addSpaceSphere( ){
              // set up the sphere vars
              var radius = 125,
              segments = 16,
              rings = 16;
  
              var material = new THREE.MeshPhongMaterial({
                  color:0xFFFFFF,
                  map: THREE.ImageUtils.loadTexture( 'textures/SPACE014S.png' )  ,
              });
  
              var sphere = new THREE.Mesh(
                  new THREE.SphereGeometry(
                      radius,
                      segments,
                      rings
                  ),
                  material
              );
  
  
              // add the sphere to the scene
              scene.add(sphere);
          }
  
          function addLights(){
              // create a point light
              var ambient = new THREE.AmbientLight( 0xFFFFFF );
              scene.add( ambient );
  
  
              // create a point light
              var pointLight = new THREE.PointLight(0xFFFFFF);
  
              // set its position
              pointLight.position.x = 10;
              pointLight.position.y = 50;
              pointLight.position.z = 130;
  
              // add to the scene
              scene.add(pointLight);
          }
  
          function createScene(){
              // add the camera to the scene
              scene.add(camera);
  
              // the camera starts at 0,0,0
              // so pull it back
              camera.position.x = 0;
              camera.position.y = 0;
              camera.position.z = 300;
  
              // start the renderer
              renderer.setSize(WIDTH, HEIGHT);
  
              $container.append(renderer.domElement);
  
              addSpaceSphere( );
  
              addLights();
  
              renderer.render(scene, camera); 
          }
  
          function onWindowResize( event ) {
              var newEarthContainerWidth = earthContainer.offsetWidth;
              var newWindowHeight = window.innerHeight;
              var newScale = newEarthContainerWidth / earthContainerWidth;
  
              sphere.geometry.__dirtyVertices = true;
  
              sphere.scale.x = sphere.scale.y = sphere.scale.z = newScale;
  
              renderer.setSize( newEarthContainerWidth, newWindowHeight );
  
              camera.aspect = newEarthContainerWidth / newWindowHeight;
              camera.updateProjectionMatrix();
              camera.radius = ( newEarthContainerWidth + newWindowHeight ) / 4;
          }
  
          var WIDTH = window.innerWidth;
          var HEIGHT = window.innerHeight;
  
          var VIEW_ANGLE = 45,
              ASPECT = WIDTH / HEIGHT,
              NEAR = 0.1,
              FAR = 10000;
  
          var $container = $('#container');
  
          // create a WebGL renderer, camera
          // and a scene
          //var renderer = new THREE.CanvasRenderer();
          var renderer = new THREE.WebGLRenderer();
          var camera = new THREE.PerspectiveCamera(
              VIEW_ANGLE, ASPECT, NEAR, FAR
          );
  
          var scene = new THREE.Scene();
  
          createScene();      
  
          window.addEventListener( 'resize', onWindowResize, false );
      &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>