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

Questions
1

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.

2

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:

yourmesh.material.side = THREE.DoubleSide;
1 Like
3

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

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

3 Likes
4

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

5

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.

1 Like
6

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.

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.getWorldDirection( v );
camera.getWorldDirection( u );
wall.material.opacity = 2*v.dot(u);

Here is the code: https://codepen.io/boytchev/pen/xxMZzJx

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

5 Likes