# Interior Design Wall Visibility

**URL:** <https://discourse.threejs.org/t/interior-design-wall-visibility/67140>\
**Category:** Questions\
**Tags:** materials\
**Created:** [June 22, 2024, 7:22am UTC](https://discourse.threejs.org/t/interior-design-wall-visibility/67140 "2024-06-22T07:22:48Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 22, 2024, 7:22am UTC](https://discourse.threejs.org/t/interior-design-wall-visibility/67140/1 "2024-06-22T07:22:48Z")

</div>

So I am trying to create an interior designer in R3F and now I am on the part where I have to make the walls invisible or fade out when the camera is pointing towards it, in other words disappear when the camera is looking at the wall so that the user can see the interior rather then the wall blocking the view.

I tried this solution:

> [@Is it possible to make a 3D wall visible only from one side in three.js?](https://discourse.threejs.org/t/is-it-possible-to-make-a-3d-wall-visible-only-from-one-side-in-three-js/57521/7):
>
> 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: wall.getWorldDirection( v ); camera.getWorldDirection( u ); wall.visible = v.dot(u) \> 0; while the soft version is: wall.getWorldDir…

given by @PavelBoytchev but my walls are acting really weird, instead of only one wall disappearing the parallel wall disappears too and its really janky any help would be appreciated.

Here’s the CodeSandbox for my code:

[https://codesandbox.io/p/sandbox/wall-visibility-djpxxd](https://codesandbox.io/p/sandbox/wall-visibility-djpxxd)

Also can anyone suggest a more efficient way of creating walls?

---

<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:** [June 22, 2024, 7:47am UTC](https://discourse.threejs.org/t/interior-design-wall-visibility/67140/2 "2024-06-22T07:47:22Z")

</div>

> [@AshhadDevLab](#):
>
> my walls are acting really weird

I do not do R3F, but most likely you have not implemented it as it is in the demo. Could you verify these two issue:

- each wall has own set of materials (i.e. materials are not shared, although the textures is OK to be shared)
- each wall is oriented outwards, i.e. two opposite walls should have opposite orientations (if one is rotated 0° (or 0 radians), the opposite wall should be rotated 180° (or π radians)

The following fragment from the demo is for `wall2` being opposite of `wall1`, see the rotation:

```javascript
var wall1 = new THREE.Mesh( geometry, material.clone() );
	wall1.position.z = 1;

var wall2 = new THREE.Mesh( geometry, material.clone() );
	wall2.rotation.y = Math.PI;	// this is important
	wall2.position.z = -1;

```

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 22, 2024, 7:56am UTC](https://discourse.threejs.org/t/interior-design-wall-visibility/67140/3 "2024-06-22T07:56:54Z")

</div>

Oh, maybe this is whats causing the issue, if I am not wrong 2 of my walls are rotated on the same angle. Let me try this fix and update you regarding it. Thanks for the help!

---

<div class="post-metadata">

**Author:** ![AshhadDevLab](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/ashhaddevlab/32/44111_2.png) [@AshhadDevLab](https://discourse.threejs.org/u/AshhadDevLab)\
**Post date:** [June 22, 2024, 8:09am UTC](https://discourse.threejs.org/t/interior-design-wall-visibility/67140/4 "2024-06-22T08:09:21Z")

</div>

Well that’s working just as you said, again thanks.