Transparent background with three.js

Transparent background with three.js

The code work, but I’m having a problem setting transparent background to the canvas with three.js. I use:
Background.renderer.setClearColor(0xffffff, 0);

But then the background gets black. How do I change it to be transparent?

The 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();

Solutions/Answers:

Solution 1:

If you want a transparent background in three.js, you need pass in the alpha parameter to the WebGLRenderer constructor.

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

You can leave the clear color at the default value.

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

three.js r.71