How to hide faces of a model facing the camera?

What I’m trying to achieve is essentially an intuitive view of the interior of a room. Take the picture below as an example of a simple box-shaped room.


What I would like to do is hide the three faces we are currently seeing to expose the interior of the “room”, while still allowing simple navigation on the outside. I know in other tools like Unity you could use a shader to accomplish something like that, but I’m new to Threejs and not familiar with how I would go about achieving this.

Where should I begin? My first thought was to edit the model’s BufferGeometry directly to remove faces with a normal facing the camera’s direction (meaning that face is in the direction of the camera), but I’m not at all sure how I would go about doing that dynamically. Any help would be appreciated, thank you!

You can use shaders or just visibility toggling for this, but if you just want to hide faces - you can try setting Material.side to Three.BackSide.

3 Likes

Just tried out BackSide for the Material.side and it works perfectly for my use case. Thank you!

Thank you. I tried to do a lot of calculations per second with the logic to calculate camera angle and wall angle in requestAnimationFrame(), but thanks to Backside I solved it really easily.