Change floor image in canvas 3D

@PavelBoytchev @Peter_Devine @mjurczyk I have tried to implement without 3D model, it’s working when we use transparent images for room. I am not able to replicate it with matt or Glossy images as background. I have kept some different images to apply as tiles.

when texture is being applied, for a second texture looks like flickering OR z-index fighting issue. any suggestion to fix it ? I am not able to resolve the issue

currently transparent image url array is applied for creating room. I have mentioned matt and glossy arrays as well. Please guide how can I implement by retaining the shadows of actual glossy or matt image, and as the images are not transparent, I am not able to display applied tiles layer on texture.

codepen link : https://codepen.io/Vatsal-Pandya-the-solid/pen/dyLQayZ

demo with transparent Images

I’ve been stuck on this for the past few days. If anyone could help or guide, it would be much appreciated.

Thanks in advance

Can you set the overlaid plane to:
overlay.renderOrder = 2;
This may prevent the depth sort issue you’re seeing.

I’m not sure what you mean by matte and glossy images?
These are going onto a plane with a BasicMaterial material.map = the Image yeah?

1 Like

Yes we have glossy (reflection) itself in background images, and trying to apply the tiles texture in such a way by which reflection/shadow (glossy/matte) effect will be also visible. you can select the glossy background by clicking on top right corners’ dropdown.

Once we choose gloosy or matte, as those images are not transparent, applied tiles texture of background layer is not visible.

I am bit new to ThreeJS. can you please share reference ?

Thanks in Advance :slight_smile:

https://threejs.org/docs/#api/en/core/Object3D.renderOrder

It’s a long shot but might give you some control over drawing order depending on how your scene is set up.

It sounds like for the “glossy and matte” stuff, you want to use a blending mode… something like…

Material({
transparent:true,
blending:THREE.MultiplyBlending,
})

Also check these threads:

1 Like

here is the demo for issue I am facing. by default background images (material) are transparent.
when I switch to non-transparent background (glossy/matte). applied tile layer seems to be not visible.

please review this codepen link once and guide if possible : https://codepen.io/Vatsal-Pandya-the-solid/pen/dyLQayZ

Thanks it worked perfectly. I just had to set roomMesh renderOrder = 1.

1 Like

Niiice. Any luck with experimenting with blending: modes?

@manthrax Yes, I have tried the method that you have suggested. blending is getting applied on the actual objects instead of the walls / floor layer.

@manthrax here is what I have tried for blending.

  materials.push(
          new THREE.MeshBasicMaterial({
            map: textures[i],
            side: THREE.DoubleSide,
            transparent: true,
            blending:THREE.MultiplyBlending,
          })
        );

result : texture got applied on the actual background.