Make a renderer's background transparent but not shapes three.js

Question

I'm using three.js where I'm showing a static background image and having a renderer animate shapes on top of it. The reason for doing this is to freely rotate the shapes' renderer without affecting the image. The problem is that the background sits behind the renderer so my question is, is it possible to make the renderer's "background" transparent (allowing the shapes to still show) in order to fully see the background image? Things I've tried: - Setting opacity on renderer's domElement - Setting transparency for rgba with renderer's setClearColor method Here's a simplified fiddle and you'll see that the square (thus renderer) is covering the background. ``` var square = new THREE.Shape(); square.moveTo(0, 0); square.lineTo(0, length); square.lineTo(length, length); square.lineTo(length, 0); square.lineTo(0, 0); var geometry = new THREE.ShapeGeometry(square); var material = new THREE.MeshBasicMaterial({ color: 'rgb(59, 89, 152)', opacity: 1, transparent: true }); var mesh = new THRE…

Accepted Answer

You need to set the `webGLRenderer` `alpha` parameter.

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

You can leave the clear color at the default value.

```
renderer.setClearColor( 0x000000, 0 ); // the default
```

Updated fiddles: http://jsfiddle.net/7McS2/3/ or http://jsfiddle.net/7McS2/4/

three.jr r.63

Make a renderer's background transparent but not shapes three.js

Solution

Problem