Hi there, I’m trying to hide an object in a hole, after searching for a solution, I followed this example & successfully create a hole:
But when I placed an object inside, it’s overlap the hole, instead of being covered behind the faces (image 3)
Image 2 is what I want to achieve but haven’t found a way so far.
I tried with clipping & masking (postprocessing) as well without success.
It would be great if someone could give me a clue.
Thanks in advanced!
P/s: just found this, it’s exactly what I’m looking for, but the source was removed…
I’ve setup up a scene here that might do what you are looking for: https://jsfiddle.net/1y3qbrn2/
The idea is to use two boxes. One box acts as a mask, the other renders its inner faces. Notice that I use a custom version of
BoxBufferGeometry which does not generate its top faces.
This is awesome, thank you, @Mugen87!
However, I faced a strange issue, it works perfectly with the materials which are created from Three.js, and failed with the materials of the loaded models (fbx/gltf), so I have to dispose the materials from the loaded models and recreate it, then it works just fine as expected.
Hopefully someone will find this helpful