Interior Design Wall Visibility

Questions
1

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:

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

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

2

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:

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;
1 Like
3

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!

4

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

1 Like