title: How to Set WebGLRender background to transparent
body: <p>I'm trying to put objects in front of CSS3DObjects with the THREE.NoBlending hack. But I only see the black plane without the CSS3DObject in the newest revisions (tried r65 and r66). A small example I made looks like this:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;script src="lib/three58.js"&gt;&lt;/script&gt;
  &lt;script src="lib/CSS3dRenderer.js"&gt;&lt;/script&gt;
  &lt;body&gt;
  &lt;script&gt;
      var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.01, 555);
      camera.position.z += 20;
  
      var rendererCSS = new THREE.CSS3DRenderer();
      rendererCSS.setSize(window.innerWidth, window.innerHeight);
      rendererCSS.domElement.style.position = 'absolute';
      document.body.appendChild(rendererCSS.domElement);
  
      var rendererMain = new THREE.WebGLRenderer();
      rendererMain.setSize(window.innerWidth, window.innerHeight);
      rendererMain.setClearColor("white", 0);
      rendererMain.domElement.style.position = 'absolute';
      document.body.appendChild(rendererMain.domElement);
  
      var scene = new THREE.Scene();
      var sceneCSS = new THREE.Scene();
  
      var planeWidth = 15;
      var planeHeight = 15;
  
      var planeMaterial   = new THREE.MeshBasicMaterial({
          blending: THREE.NoBlending,
          opacity : 0.0,
          transparent : true,
          color : 0x000000,
          side : THREE.DoubleSide
      });
      var planeGeometry = new THREE.PlaneGeometry(planeWidth, planeHeight);
      var planeMesh = new THREE.Mesh(planeGeometry, planeMaterial);
      scene.add(planeMesh);
  
      var element = document.createElement('iframe')
      var aspectRatio = planeHeight / planeWidth;
      var elementWidth = 1024;
      var elementHeight = elementWidth * aspectRatio;
      element.src = 'moo.html';
      element.style.width = elementWidth + "px";
      element.style.height = elementHeight + "px";
  
      var objectCSS = new THREE.CSS3DObject(element);
      objectCSS.scale.x = planeWidth / elementWidth;
      objectCSS.scale.y = planeHeight / elementHeight;
      objectCSS.position = planeMesh.position;
      objectCSS.rotation = planeMesh.rotation;
      sceneCSS.add(objectCSS);
  
      var material = new THREE.MeshBasicMaterial({color: 0xff0000});
      var mesh = new THREE.Mesh(new THREE.SphereGeometry(5.0, 20.0, 20.0), material);
      var mesh2 = new THREE.Mesh(new THREE.SphereGeometry(5.0, 20.0, 20.0), material);
      mesh.position.set(5, 0, -1); 
      mesh2.position.set(-8, 0, -6); 
      scene.add(mesh); // in front
      scene.add(mesh2); // behind
  
      animate();
  
      function animate() {
          requestAnimationFrame(animate);
          rendererMain.render(scene, camera);
          rendererCSS.render(sceneCSS, camera);
      }
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>moo.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;body style="background-color: purple"&gt;
  &lt;p align="center"&gt;&lt;font color="lime" size="150"&gt;hello world&lt;/font&gt; &lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is the result:</p>
  
  <p>Revision 58: <a href="http://i.imgur.com/tCszJ8X.jpg" rel="nofollow">http://i.imgur.com/tCszJ8X.jpg</a></p>
  
  <p>Revision 66: <a href="http://i.imgur.com/kfppVwF.jpg" rel="nofollow">http://i.imgur.com/kfppVwF.jpg</a></p>
  
  <p>I've tried to understand why, it's probably something very simple. I can't find anything in migration that would change the behavior in this way.</p>
  
  <p>Thanks in advance.</p>