How to add more than one image to a side of a box?

So I have a box that I’m using as a ground in my application and I’m adding an image to the whole box, the problem im facing is I want to add another image to only the top of the box, and this image happens to to be an empty square that I just want to place on top of the box so that I can have like a border line. I want this image to appear on top of the previous set image on the box, I don’t want it to replace it. This is what the image of the square looks like.


I want the previous set image to appear under this empty square.

It’s hard to understand what you mean. Can you provide a playground of what you are trying to do?

Hi @Jad_Matta,
I’m not sure if I understood properly what you are looking to do… but…
In case you wish to add the image in the white area, keeping the red border, the quickest solution would be using a graphic program (Gimp would do everything) and saving the new image to be used…

If the question is related to mapping the box, there is a guide that speaks about that

Basically, you generate an array containing all the faces in order, and you assign the texture in portions.

There is also an explanation on how to assign multiple materials to the same object (so in your case faces)

I hope I understood well and this can help!

1 Like

Also Map Materials to Individual Mesh Faces | Babylon.js Documentation

1 Like

Chiming in with one more option, instead of using two different textures, you could draw the image you want in top of a purple square by using a Dynamic Texture! Dynamic Textures | Babylon.js Documentation

3 Likes