Textures - show only certain parts of them (fragmentShader)

Hello!

I have a 3d map in mapbox and I am using threebox to connect it with three js. In this map I want to add floormaps for buildings, and I want to do this with three js planes and textures. I am able to convert the shape of a building into a plane as well as making a rectangle for the floormap. In the picture I attached, the blue parts is the building shape, the image is the image/texture, but the red triangles is what I would like to “remove”. My question is: is there a way to take the plane of the shape and the texture (I can use another plane for this is needed) and somehow combine them to only show the shape and then that part of the texture that would cover up, or in other words, removing the red triangles. The parts that would not be covered up by anything in this example would be nice if they can be transparent, otherwise just a random color.

Thanks in advance!
Philip

A very rough and imperfect attempt: Edit fiddle - JSFiddle - Code Playground

2 Likes

Hello @prisoner849!

Sorry for the late reply, but thanks for the help, this is just what I am looking for! Now that I know what I have to use it will be easier to found a good solution.

Thanks again and merry Christmas!

Hello again!

I was trying some things out and realized that it uses a vector 2 as the “map” of where to show it or not, would it be somehow possible to change this to something more complex, so that you can take for example a threejs shape and use it?

Best regards
Philip