Window material makes others materials invisible behind it

Questions
, ,
1

Hello everyone !

I’m having quite a weird behaviour in my scene, I have GLTF object items in my scene and also some raw colored blocks, both work without issue, but I’m having an aesthetic issue with the blocks when they are behind a window of my scene, here’s some screenshots :

image
image1920×1053 63.9 KB

image
image1896×802 170 KB

As you can see, the items loaded from GLTF are displaying correctly behind the windows but not the colored blocks.

Here’s how I initialize my blocks :

  private initializeMesh(): void {
    const geometry = new BoxGeometry();

    const material = new MeshLambertMaterial({
      color: this.definition.color,
      lightMap: this.project.noiseTexture,
      transparent: true,
      opacity: this.definition.opacity,
    });

    this.mesh = new Mesh(geometry, material);

    this.mesh.castShadow = true;
    this.mesh.receiveShadow = true;
    this.mesh.matrixAutoUpdate = false;
    this.mesh.matrixWorldAutoUpdate = false;

    this.add(this.mesh);
  }

Transparent / Opacity are controlled by the app but they are all set full visible. (1)
I tried several config but they always become invisible when we rotate the camera and they are behind the windows…

Any idea why this behaviour happens ?

Thanks a lot in advance for any advice / suggestions and have a nice day ! :slight_smile:

1 Like
2

See:

Do the boxes need to be transparent? If so then you’ll need to use alpha blending (.transparent = true) instead of material.transmission for the windows, or a use different opacity technique like .alphaHash for the boxes.

1 Like