# Is it possible to make a 3D wall visible only from one side in three.js?

**URL:** <https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521>\
**Category:** Questions\
**Tags:** materials\
**Created:** [October 28, 2023, 9:44pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521 "2023-10-28T21:44:03Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![Solemensis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/solemensis/32/41392_2.png) [@Solemensis](https://discourse.threejs.org/u/Solemensis)\
**Post date:** [October 28, 2023, 9:44pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/1 "2023-10-28T21:44:03Z")

</div>

[![](https://img.youtube.com/vi/C70Gec2JWb0/maxresdefault.jpg "Invisible Walls for Rooms in Blender") ](https://www.youtube.com/watch?v=C70Gec2JWb0)

this short video is about making a plane (2d) wall visible from only one side in blender. its pretty easy, and my question is:

can same thing done for a thick (3d) wall in three.js (or even blender, i can do it in blender and export it to three.js)? I need to make my thick interior walls visible from only one side, and the technique in the video is not working for my thick walls as they are 3d.

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [October 28, 2023, 10:31pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/2 "2023-10-28T22:31:45Z")

</div>

You mean you want to do the same thing, but to walls with volume ? Just make the wall into three parts. The inner wall and the outer will have its normals face to the center of the room. The wall width should probably made double sided, I do belive the command for it was something like:

```javascript
yourmesh.material.side = THREE.DoubleSide;

```

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 28, 2023, 10:53pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/3 "2023-10-28T22:53:39Z")

</div>

> [@Solemensis](#):
>
> can same thing done for a thick (3d) wall in three.js

Yes. Here is how it looks with hard change of visibility:

Personally, I’d like somewhat softer change of visibility. Like this fading:

---

<div class="post-metadata">

**Author:** ![Solemensis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/solemensis/32/41392_2.png) [@Solemensis](https://discourse.threejs.org/u/Solemensis)\
**Post date:** [October 28, 2023, 11:06pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/4 "2023-10-28T23:06:56Z")

</div>

Yes, that’s exactly what i’m looking for! How can this be implemented?

---

<div class="post-metadata">

**Author:** ![Akroob](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/akroob/32/41267_2.png) [@Akroob](https://discourse.threejs.org/u/Akroob)\
**Post date:** [October 28, 2023, 11:17pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/5 "2023-10-28T23:17:35Z")

</div>

This one seems to be done by regulating the opacity of the material, determined by the camera depth of field or how close the object is to the camera.

---

<div class="post-metadata">

**Author:** ![Solemensis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/solemensis/32/41392_2.png) [@Solemensis](https://discourse.threejs.org/u/Solemensis)\
**Post date:** [October 28, 2023, 11:55pm UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/6 "2023-10-28T23:55:32Z")

</div>

yes, i’ll implement it by the distance of the walls (meshes) from the camera, as it feels easier for me for now. thank you, and still any suggestions are welcome about the topic.

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [October 29, 2023, 5:33am UTC](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/7 "2023-10-29T05:33:05Z")

</div>

The walls are oriented in such a way, that their local Z axis points outwards. Then I measure the angle between the Z axis of a wall and the Z axis of the camera – if the angle is less than 90 ° then the wall is visible. Of course, instead of calculating the angle, it is faster to calculate the dot product and check the sign.

The hard version is implemented as:

```javascript
wall.getWorldDirection( v );
camera.getWorldDirection( u );
wall.visible = v.dot(u) > 0;

```

while the soft version is:

```javascript
wall.getWorldDirection( v );
camera.getWorldDirection( u );
wall.material.opacity = 2*v.dot(u);

```

Here is the code: [https://codepen.io/boytchev/pen/xxMZzJx](https://codepen.io/boytchev/pen/xxMZzJx)

Toggle lines 131/132 to switch between hard and soft versions.