CODEWITHSUNDEEP
javascriptthree.js
Martavis P.
Martavis P.

Reputation: 1838

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

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:

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 THREE.Mesh(geometry, material);
mesh.position.x = 50;
mesh.position.y = 50;
scene.add(mesh);

// and the camera
scene.add(camera);

renderer.render( scene, camera );

Upvotes: 3

Views: 7030

Answers (1)

WestLangley
WestLangley

Reputation: 104763

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

Upvotes: 11

Related Questions