Change floor image in canvas 3D

Questions
, , , , ,
21

@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

22

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

23

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
24

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:

25

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
26

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

27

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

1 Like
28

Niiice. Any luck with experimenting with blending: modes?

29

@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.

30

@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.

image
image1237×707 52.2 KB

image
image1439×813 63.3 KB

31

Bump.

can someone guide for the blending ? how can we keep the glossy or matt effect of the background images and apply tiles on walls & floor?

Thanks in Advance.

regards,

33

@manthrax I am trying to apply blending but it gave following result and i am not able to figure out why the blank bar is visible in output.

I have another doubt is the floor & walls which are created using data array are large in size compared to the actual room images and due to blending now extra part of the floor & walls are also visible. how to overcome it ? I have updated code in codepen link. please review it once.

Now i am trying to figure out how we can apply the transparent layer again so tiles won’t be displayed on actual objects such as TV or any room interior. OR suggest better way to do it.

image
image1919×941 152 KB

appearance of extra part of wall

image
image1806×903 114 KB

Edit : I have removed blending from room’s top image by following code. now I am getting black bars for front & back side. applying NormalBlending for them won’t work as tiles are applied on that part as well with NormalBlending those changes won’t be visible.

 blending:
            i === 2 || i === 4 || i === 5
              ? THREE.NormalBlending
              : THREE.MultiplyBlending, // Apply MultiplyBlending except for the top image

image
image1920×946 91.7 KB

image
image1804×938 98.3 KB

how to maintain the original such as tile texture can’t be displayed on room objects.

image
image1148×852 100 KB

34

many thanks to everyone finally completed this :slight_smile:

final solution was suggested by @umeshravani

Solution :

  1. Create different skybox for each type of layer (Add blendning = MultiplyBlending
    while creating materials of skyboxes except the base / transparent layer)
  2. manage renderOrder of the skyboxes as per the requirement.
35

Hii, can we get the code of this

36

Sure.

The source code for GIMP is here: https://download.gimp.org/gimp/v2.10/. I used version 2.10.28, but any other version can do the same.

3 Likes
37

thank you for the reply I am very beginner in this filed can you please send the project code of video.

38

There is no project code, there is no project at all. I used GIMP (this is an image manipulation program, like Photoshop), added several layers and manually changed what layers are shown and what are hidden. Then I made a video with screen capture and posted that video.

I’m sorry for the disappointment.

2 Likes
39

ok, and thank you so much for you response

40

Hii @Vatsal_Pandya, can you please share the code of solution with us

41

this thread was few months ago, pretty much things are changed now in code.

you may refer this latest post if you are trying to replicate the similar thing :slight_smile: