Display One Mesh On Top of Another

I have 2 3D models with roughly the same (pretty much the same) dimensions; both meshes will intersect and overlap at several points. I would like one mesh to always be displayed above the other and the mesh of the object underneath is never displayed unless it isn’t covered by the mesh of the object on top–much like how a vest is worn over a shirt (vest is the mesh being displayed above). Without scaling, how can I achieve this? Thanks in advance!


Could you provide a live code example?

Thanks for replying! I’m new to three.js so i’m not sure what you mean by a “live code example”. I think you want to look at my code? However, I don’t have anything other than the basic three.js template and an exact copy of the gltf loader. I also rephrased my question to make it a little clearer if that will help at all.

@prisoner849 means something like this: Edit fiddle - JSFiddle - Code Playground

Ahh i see. I just have the basic three.js template and a gltf loader copied directly from the documentation. The code works but I have no idea where to go from here. I’m assuming the ability to hide 1 mesh under another overlapping mesh lies somewhere in the loader, renderer, or geometry? (I should have been more clear in my question, I have reworded it).

Why don’t you want to use scaling?

I had made a new post on the problem but it seems to have been deleted. I found how to “Display One Mesh On Top of Another”, but the results weren’t what I actually wanted-- I believe it is a different problem entirely. Is there a way to restore the post or will I have to post a new one? In regards to why I can’t scale, the two objects need to have very similar dimensions (this would be better explained by the deleted post as I have provided visuals). Sorry to cause you all the trouble.

If you think it’s a different problem and not a duplicate, then I restore the post. Should be live again.

Thanks so much.