# How to hide object in a cube hole?

**URL:** <https://discourse.threejs.org/t/how-to-hide-object-in-a-cube-hole/17455>\
**Category:** Questions\
**Tags:** materials\
**Created:** [July 28, 2020, 2:46am UTC](https://discourse.threejs.org/t/how-to-hide-object-in-a-cube-hole/17455 "2020-07-28T02:46:39Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![mrgoonie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrgoonie/32/6609_2.png) [@mrgoonie](https://discourse.threejs.org/u/mrgoonie)\
**Post date:** [July 28, 2020, 2:46am UTC](https://discourse.threejs.org/t/how-to-hide-object-in-a-cube-hole/17455/1 "2020-07-28T02:46:39Z")

</div>

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](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.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a343148f358c20101ec5ac502e4a0eaeb1fe62e9.jpeg)

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](https://twitter.com/jerome_etienne/status/836754117964017664), it’s exactly what I’m looking for, but the source was removed… 😢

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [July 28, 2020, 12:48pm UTC](https://discourse.threejs.org/t/how-to-hide-object-in-a-cube-hole/17455/2 "2020-07-28T12:48:01Z")

</div>

I’ve setup up a scene here that might do what you are looking for: [https://jsfiddle.net/1y3qbrn2/](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.

---

<div class="post-metadata">

**Author:** ![mrgoonie](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrgoonie/32/6609_2.png) [@mrgoonie](https://discourse.threejs.org/u/mrgoonie)\
**Post date:** [July 28, 2020, 5:03pm UTC](https://discourse.threejs.org/t/how-to-hide-object-in-a-cube-hole/17455/3 "2020-07-28T17:03:09Z")

</div>

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 🙂