Transparent background with three.js

Question

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

WestLangley · Accepted Answer · 2015-03-30T13:42:22.897

362

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

edited Mar 30 '15 at 13:42

answered Dec 10 '13 at 13:49

WestLangley

102,557
10
276
276

@WestLangley Should we see a performance drop when using this technique? Is it noticeable? – tfrascaroli Jan 12 '17 at 12:20
1

@tfrascaroli Did you see one? – WestLangley Jan 12 '17 at 14:08
I posted the comment before trying. Now that I have tried it, it doesn't look like it, but the geometry I'm rendering is really small. I was asking because I was planning on using this in larger projects. Anyway, it doesn't seem to have an impact, or at least is not rellevant within my project. – tfrascaroli Jan 12 '17 at 14:51
5

this is called a solition. "just paste this code line". Not finding smth easy like this often in three.js. thanks bro – messerbill Mar 06 '17 at 18:54
@WestLangley how can i set background image with shader effect ? VolumetericLightShader https://stackoverflow.com/questions/46864037/how-to-get-sun-rays-from-the-middle-of-the-object-in-threejs – underscore Dec 02 '17 at 06:26
1

As of August 2020, this answer is out of date and does not seem to apply to latest versions of Threejs – Kirk Sefchik Aug 17 '20 at 17:27
@KirkSefchik The answer is correct. Why did you downvote this answer? – WestLangley Aug 18 '20 at 05:06
also, i added this "scene.background = null" – Hariharan Kanakaraja Jul 04 '21 at 19:26
1

@KirkSefchik Works for me with version 120. Maybe your version had a bug? – aggregate1166877 Nov 24 '21 at 06:43
@KirkSefchik It works for me as well with the latest npm package (0.136.0). Maybe your background was not the same as the clear color? The [`setClearColor` method](https://threejs.org/docs/#api/en/renderers/WebGLRenderer.setClearColor) just chooses a color that should be transparent. The default is black (`0x000000`). – ChrisCrossCrash Jan 06 '22 at 06:35
1

still works, v138 – T S Mar 05 '22 at 12:38

score 16 · Answer 2 · edited Nov 06 '22 at 10:08

16

For Three.js < v125
You also have to set scene.background = null;

edited Nov 06 '22 at 10:08

aydar.media

124
1
13

answered Feb 10 '21 at 08:45

Dimitrios Ververidis

1,118
1
9
33

3

This helped me achieve the desired result, together with the voted answer. Thank you! – ggluta Apr 07 '21 at 14:24
3

This doesn't work for me (`three.js r129`). – BarryCap Jun 27 '21 at 19:05
doesnt work v138 – T S Mar 05 '22 at 10:52

score -7 · Answer 3 · edited Jun 16 '21 at 10:41

-7

A transparent background can be achieved with the following code.

scene.background = transparent;

edited Jun 16 '21 at 10:41

TidyDev

3,470
9
29
51

answered Jun 15 '21 at 19:23

Alaa Sufi

1

3

This can't possibly be right, can it? `transparent` is just going to refer to a name that doesn't exist— It's basically equivalent to `scene.background = undefined;`. – Will Chen Jun 16 '21 at 13:15

Transparent background with three.js

3 Answers3

Linked