javascript - BoxGeometry sides

Question

I already asked a Question here: Add Thickness to faces

The core question is solved but i ran into another problem. Before my walls were set on side:THREE.BackSide so that they didnt show when they faced the camera but now when they have a thickness that doesnt work anymore and i dont realy understand why.

Before: Before

After: After

How can i make the thick walls behave like the Plane walls ?

Answer 1

A very rough concept of controlling the visibility of a wall (I've slightly changed translating and positioning of a geometry):

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(0, 5, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

var controls = new THREE.OrbitControls(camera, renderer.domElement);

scene.add(new THREE.GridHelper(10, 10));

var points = [
  new THREE.Vector3(-2, 0, 2),
  new THREE.Vector3(2, 0, 2),
  new THREE.Vector3(2, 0, -2),
  new THREE.Vector3(-2, 0, -2)
]

var walls = [];

points.forEach((p, idx, points) => {
  let nextIdx = idx === points.length - 1 ? 0 : idx + 1;
  buildWall(p, points[nextIdx], 2, 0.1);

});

function buildWall(pointStart, pointEnd, height, thickness) {

  var boxW = pointEnd.clone().sub(pointStart).length();
  var boxH = height;
  var boxD = thickness;

  var boxGeometry = new THREE.BoxGeometry(boxW, boxH, boxD);
  boxGeometry.translate(0, boxH * 0.5, 0);
  boxGeometry.rotateY(-Math.PI * 0.5);
  var wall = new THREE.Mesh(boxGeometry, new THREE.MeshBasicMaterial({
    color: "aqua",
    wireframe: true
  }));
  wall.position.copy(pointStart).add(pointEnd).multiplyScalar(0.5);
  wall.lookAt(pointEnd);
  scene.add(wall);
  walls.push(wall);
}

var currentPosition = new THREE.Vector3();
render();

function render() {
  requestAnimationFrame(render);
  walls.forEach(w => {
    w.visible = currentPosition.copy(w.position).sub(camera.position).lengthSq() > camera.position.lengthSq();
  })
  renderer.render(scene, camera);
}

body {
  overflow: hidden;
  margin: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>