javascript - 盒子几何边

Question

我已经在这里问了一个问题:Add Thickness to faces

核心问题解决了，但我遇到了另一个问题。 在我的墙壁设置在侧面之前:THREE.BackSide，这样它们在面对相机时不会显示出来，但现在当它们的厚度不再起作用时，我真的不明白为什么。

之前: Before

之后:After

我怎样才能让厚墙表现得像平面墙一样？

Answer 1

控制墙可见性的一个非常粗略的概念(我稍微改变了几何图形的平移和定位):

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>