How to Set WebGLRender background to transparent

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:

index.html:

<!doctype html>
<script src="lib/three58.js"></script>
<script src="lib/CSS3dRenderer.js"></script>
<body>
<script>
    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);
    }
</script>
</body>

JavaScript
​x
 
<!doctype html>
<script src="lib/three58.js"></script>
<script src="lib/CSS3dRenderer.js"></script>
<body>
<script>
    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);
    }
</script>
</body>
​

moo.html:

<!DOCTYPE html>
<html>
<body style="background-color: purple">
<p align="center"><font color="lime" size="150">hello world</font> </p>
</body>
</html>

JavaScript
 
<!DOCTYPE html>
<html>
<body style="background-color: purple">
<p align="center"><font color="lime" size="150">hello world</font> </p>
</body>
</html>
​

This is the result:

Revision 58: http://i.imgur.com/tCszJ8X.jpg

Revision 66: http://i.imgur.com/kfppVwF.jpg

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.

Thanks in advance.

Answer

If you want a transparent background with WebGLRenderer, you need to set alpha = true in the WebGLRenderer constructor. You can then set the clear color.

var renderer = new THREE.WebGLRenderer( { alpha: true } );

renderer.setClearColor( 0x00ff00, 0.5 );

JavaScript
 
var renderer = new THREE.WebGLRenderer( { alpha: true } );
​
renderer.setClearColor( 0x00ff00, 0.5 );
​

three.js r.66

Advertisement

Answer