title: Three.js / web VR.: alpha renders black. how to set it to transparent?
body: <p>I am using <a href="https://github.com/povdocs/webvr-starter-kit" rel="nofollow noreferrer">WebVR starter kit</a> (The simplified API is a wrapper for three.js) to simulate a VR tour. The problem is that the Renderer renders alpha black:</p>
  
  <p><a href="https://jsbin.com/hugubez" rel="nofollow noreferrer">VR simulation</a></p>
  
  <p>I believe the Renderers is VR.renderer, and I try use renderer.setClearColor( 0x000000, 0 ) to set the black color to transparent. it didn't work. Now I have no clue and completely stuck. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;script src="//povdocs.github.io/webvr-starter-kit/build/vr.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>JavaScript</p>
  
  <pre><code>var renderer = VR.renderer;
  renderer.setClearColor( 0x000000, 0 );
  
  var mark1 = VR.image('http://i.imgur.com/6Pae8y7.png').setScale(0.2);
  
  mark1.text({text:"Focus"}).moveTo(0,0.8,0);
  
  var focus = VR.camera.torus({radius:0.02,
             tube:0.01,
             color:"white",
             }).moveTo(0,0,-4);
  
  var img1 = "http://i.imgur.com/7Wc2FZh.jpg";
  var img2 = "http://i.imgur.com/hkf4fvk.jpg"
  var img3 = "http://i.imgur.com/4nMNbYY.png";
  var imgs = [img1, img2, img3];
  var i = 0;
  
  VR.panorama(imgs[i]);
  
  VR.on('lookat', function(target){
      if (target === mark1.object)
          VR.vibrate(250);
          i=(i+1)%3;
          VR.panorama(imgs[i]);
      });
  </code></pre>
  
  <p>You may play with the code in <a href="https://jsbin.com/hugubez/edit?html,js,output" rel="nofollow noreferrer">here</a></p>