title: textured sprite is all black in three.js
body: <p>I'm starting on three.js and I'm already stuck on a trivial case : display an image on a sprite. I can only get a black plane following the lines written in the documentation:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset=utf-8&gt;
          &lt;title&gt;TEST Sprite&lt;/title&gt;
          &lt;style&gt;
              body { margin: 0; background-color:#000; }
              canvas { width: 100%; height: 100%; }
              #glRender {
                  position:absolute;
                  top: 50px;
                  left: 200px;
                  min-width: 200px;
                  width: 50%;
                  min-height: 200px;
                  z-index: 1;
                  height: 50%;
                  border: 10px solid #38272C;
              }           
  
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="glRender"&gt;&lt;/div&gt;
          &lt;script src="http://threejs.org/build/three.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              var scene = new THREE.Scene();
              var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
              var renderer = new THREE.WebGLRenderer();
              renderer.setSize( window.innerWidth / 2, window.innerHeight / 2 );
  
              container = document.getElementById( 'glRender' );
              document.body.appendChild( container );
              container.appendChild( renderer.domElement );
  
              // A simple cube
              var geometry = new THREE.BoxGeometry( 1, 1, 1 );
              var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
              var cube = new THREE.Mesh( geometry, material );
              scene.add( cube );
  
              // completely black...
              var photoTexLoad = new THREE.TextureLoader().load( 'http://s2.favim.com/610/150817/plage-summer-Favim.com-3137863.jpg' );
              var matPhoto = new THREE.SpriteMaterial( { map: photoTexLoad, color: 0xffffff } );
              var sprite = new THREE.Sprite( matPhoto );
              sprite.scale.set( 2, 2, 2 );
              sprite.position.set( 1, 0, 0.5 );
              scene.add( sprite );
  
              camera.position.z = 5;
  
              function render() {
                  requestAnimationFrame( render );
                  cube.rotation.x += 0.01;
                  cube.rotation.y += 0.1;
                  renderer.render( scene, camera );
              }
  
              render();
  
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I get the spinning green cube intersecting with a black plane.
  What did I miss to have the image displayed on the plane?</p>