I have this code example:
https://jsfiddle.net/Peque/nxf7b9t6/
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… 
Any suggestions on how could I approach this with Three.js? 
Edit
Current result:
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):
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.
