Changing Three.Js Background to Transparent or Other Color

Changing three.js background to transparent or other color

I came across this when I started using three.js as well. It's actually a javascript issue. You currently have:

renderer.setClearColorHex( 0x000000, 1 );

in your threejs init function. Change it to:

renderer.setClearColorHex( 0xffffff, 1 );

Update: Thanks to HdN8 for the updated solution:

renderer.setClearColor( 0xffffff, 0);

Update #2: As pointed out by WestLangley in another, similar question - you must now use the below code when creating a new WebGLRenderer instance in conjunction with the setClearColor() function:

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

Update #3: Mr.doob points out that since r78 you can alternatively use the code below to set your scene's background colour:

var scene = new THREE.Scene(); // initialising the scene
scene.background = new THREE.Color( 0xff0000 );

Changing three.js background to opacity .5

You can try to set the clear color and alpha value of the renderer like the following in order to have more control about how the background is rendered:

const renderer = new THREE.WebGLRenderer( { alpha: true } );
renderer.setClearColor( color );
renderer.setClearAlpha( 0.5 );

https://jsfiddle.net/vr648d3z/1/

Transparent background with three.js

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

Setting a transparent background with three.js

I think there are a couple things missing there:

1. You do need alpha: true on the scene, as you mention.
2. Don't change setClearColor.
3. If you're using EffectComposer, there is some extra work required to make it allow a transparent background, see these comments. How do I stop EffectComposer from destroying my transparent background?

I'd recommend starting with renderer.render( scene, camera ) instead of composer.render() just to make sure you have the first two parts working.

Preserve original colour when wrapping a transparent background PNG around a cylinder using three.js

Thank you to Marquizzo's comment for pointing me in the right direction.

Switching from MeshStandardMaterial to MeshBasicMaterial alone didn't solve the issue, but when used with...

MeshBasicMaterial( { map: texture, transparent: true } );

I got the exact desired results.

how to make background transparent in threejs and PyQt app?

First, set the QWebEngineView's page to have a transparent background.

In main.py:

    ...
    self.scheme_handler = QtSchemeHandler()
+++ self.browser.page().setBackgroundColor(Qt.GlobalColor.transparent)      
    self.browser.page().profile().installUrlSchemeHandler(
      b"qt", self.scheme_handler
    )
    ...

Then, set the HTML page's background to transparent.

In index.html:

    ...
    <style>
      body{
        margin: 0;
        overflow: hidden;
+++     background: rgba(0, 0, 0, 0);
      }
    </style>
    ...

And finally, set the Three.js WebGLRenderer to use a transparent background.

Still in index.html:

    // renderer setup
    const renderer = new THREE.WebGLRenderer({
      canvas: canvas, 
      antialias: true, 
+++   alpha: true
    });

How to load texture with transparent background and make it movable?

You need the transparent: true setting when creating your material, like so:

const newMat = new THREE.MeshPhongMaterial({ map: texture, transparent: true });

---

Related Topics