How to hide object in a cube hole?

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:

https://stemkoski.github.io/AR-Examples/hole-box.html

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… :cry:

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.

2 Likes

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 :slight_smile:

1 Like