title: Transparent background with three.js
body: <p>The code work, but I'm having a problem setting transparent background to the canvas with three.js. I use:</p>
  
  <pre><code>Background.renderer.setClearColor(0xffffff, 0);
  </code></pre>
  
  <p>But then the background gets black. How do I change it to be transparent?</p>
  
  <hr>
  
  <p>The code:</p>
  
  <pre><code>   var camera, scene, renderer;
     var mouseX = 0, mouseY = 0;
     var p;
  
     var windowHalfX = site.Width / 2;
     var windowHalfY = site.Height / 2;
  
     Background.camera = new THREE.PerspectiveCamera( 35, site.Width / site.Height, 1, 2000 );
     Background.camera.position.z = 300;
     //camera.position.y = 200;
  
     // scene
     Background.scene = new THREE.Scene();
  
     // texture
     var manager = new THREE.LoadingManager();
     manager.onProgress = function ( item, loaded, total ) {
        console.log('webgl, twice??');
        //console.log( item, loaded, total );
     };
  
  
     // particles
     var p_geom = new THREE.Geometry();
     var p_material = new THREE.ParticleBasicMaterial({
        color: 0xFFFFFF,
        size: 1
     });
  
     // model
     var loader = new THREE.OBJLoader( manager );
     loader.load( site.base_url + '/assets/models/head.obj', function ( object ) {
  
        object.traverse( function ( child ) {
  
           if ( child instanceof THREE.Mesh ) {
  
              // child.material.map = texture;
  
              var scale = 6;
  
              $(child.geometry.vertices).each(function() {
                 p_geom.vertices.push(new THREE.Vector3(this.x * scale, this.y * scale, this.z * scale));
              })
           }
        });
  
        Background.scene.add(p)
     });
  
     p = new THREE.ParticleSystem(
        p_geom,
        p_material
     );
  
     Background.renderer = new THREE.WebGLRenderer();
     Background.renderer.setSize( site.Width, site.Height );
     Background.renderer.setClearColor(0xffffff, 0);
  
     $('.particlehead').append(Background.renderer.domElement);
     $('#content').on('mousemove', onDocumentMouseMove);
     site.window.on('resize', onWindowResize);
  
     function onWindowResize() {
        windowHalfX = site.Width / 2;
        windowHalfY = site.Height / 2;
        //console.log(windowHalfX);
  
        Background.camera.aspect = site.Width / site.Height;
        Background.camera.updateProjectionMatrix();
  
        Background.renderer.setSize( site.Width, site.Height );
     }
  
     function onDocumentMouseMove( event ) {
        mouseX = ( event.clientX - windowHalfX ) / 2;
        mouseY = ( event.clientY - windowHalfY ) / 2;
        //console.log(mouseX)
     }
  
     Background.animate = function() { 
  
        //console.log('animate2');
        Background.ticker = TweenMax.ticker;
        Background.ticker.addEventListener("tick", Background.animate);
  
        render();
     }
  
     function render() {
        Background.camera.position.x += ( (mouseX * .5) - Background.camera.position.x ) * .05;
        Background.camera.position.y += ( -(mouseY * .5) - Background.camera.position.y ) * .05;
  
        Background.camera.lookAt( Background.scene.position );
  
        Background.renderer.render( Background.scene, Background.camera );
     }
  
     render();
  </code></pre>