Scene background image opacity

Hello! Application I’m working on allows user to add background color/background image to a scene. I have no issues at all when setting opacity to background color. However, i have no idea how to achieve that with background image. Is it possible? I’m using TextureLoader.

background color

this.renderer.setClearColor(color, opacity);

background image

        const loader = new THREE.TextureLoader();
        if (this.backgroundImage) {
          loader.load(this.backgroundImage, (texture) => {
            this.scene.background = texture;

Thank you for your help!

The opacity has to be encoded in the image itself. So try using a transparent PNG.

I see. So it is not possible to add i.e some kind of layer to the image with opacity?

No, that is not possible. You have to prepare the background image before you assign it to Scene.background.

Alternatively, you have to implement custom background logic (meaning a ShaderMaterial applied on a plane mesh) based on the internal code of the renderer.

1 Like