Scene background image opacity

Questions
,
1

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!

2

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

4

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

5

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