Apply single texture to multiple meshes with absolute size and position

I have this code example:

Where I create two meshes. One “lower” mesh and one “upper” mesh. Asumptions:

  • The lower mesh lies on the X-Y horizontal plane (Z is up)
  • The lower mesh is a perfect square
  • No X-Y coordinates of the upper mesh will ever be outside the boundaries of the lower mesh
  • All vertices in the upper mesh are above or at the lower mesh (no Z coordinate of the upper mesh will ever be negative)
  • The upper mesh is a flat surface (i.e.: single face) in the 3D space (not necessarily parallel to the X-Y plane) and can have any number of vertices

In the code shared above, I could easily draw a texture on the lower mesh.

Now I would like to draw the same texture on the upper mesh but in a way that, when looking from above with an orthographic projection, it would seem to the observer as if there was only one texture.

I guess the effect would be as if the texture fell from the sky and painted the meshes it touched while falling down, but just with the pixels that intersect with that mesh. The texture would be of a fixed size (that of the lower mesh) and would be absolutely positioned.

Not sure the problem is clear… :sweat_smile:

Any suggestions on how could I approach this with Three.js? :blush:


Current result:

Screenshot from 2020-01-28 00-29-19

Expected result if we used an orthographic projection (with the code shared above the camera uses a perspective projection, so you would in fact note the upper mesh a bit):

Screenshot from 2020-01-28 00-29-52

Note the fact that it looks just like a single mesh (like the lower mesh), the upper mesh is still there, only it has the texture in a way that makes it invisible from that angle.

You need to calculate UV coordinates for the upper mesh in boundaries of the lower one:


Great, thanks! Easy to understand with that texture too! :heart_eyes:

You’re welcome :slight_smile: :beers:

1 Like