Three.js中为平面墙体添加厚度的实现问题求助

It looks like you're on the right track by adding offset vertices to create wall thickness, but the issues are coming from incorrect thickness direction calculation and wrong face vertex ordering. Let's fix this step by step:

1. First, Calculate a Universal Thickness Direction #

Instead of hardcoding x-axis offsets (which only works for walls aligned with the z-axis), we'll compute the direction perpendicular to your wall. This way, the thickness will work no matter which way the wall is facing:

makeWall(start, end) {
  const v1 = this.helpers.toVec3(start);
  const v2 = this.helpers.toVec3(end);
  const wallHeight = this.wallHeight;
  const wallThickness = 10; // Adjust this to your desired thickness

  // Get the direction of the wall (from start to end)
  const wallDirection = new THREE.Vector3().subVectors(v2, v1).normalize();
  // Calculate the direction for thickness (perpendicular to wall and up)
  const upVector = new THREE.Vector3(0, 1, 0);
  const thicknessDirection = new THREE.Vector3()
    .crossVectors(wallDirection, upVector)
    .normalize()
    .multiplyScalar(wallThickness / 2); // Divide by 2 to offset evenly from center

  // Generate original front wall vertices
  const v3 = v2.clone().setY(wallHeight);
  const v4 = v1.clone().setY(wallHeight);

  // Generate offset back wall vertices
  const v1ex = v1.clone().add(thicknessDirection);
  const v2ex = v2.clone().add(thicknessDirection);
  const v3ex = v3.clone().add(thicknessDirection);
  const v4ex = v4.clone().add(thicknessDirection);

  // Build geometry
  const geometry = new THREE.Geometry();
  geometry.vertices = [v1, v2, v3, v4, v1ex, v2ex, v3ex, v4ex];

  // Add faces (keep vertex order consistent for correct normals)
  // Front face (original wall)
  geometry.faces.push(new THREE.Face3(0, 1, 2));
  geometry.faces.push(new THREE.Face3(0, 2, 3));
  // Back face (offset wall)
  geometry.faces.push(new THREE.Face3(5, 4, 7));
  geometry.faces.push(new THREE.Face3(5, 7, 6));
  // Side 1: Connects v1 -> v4 -> v4ex -> v1ex
  geometry.faces.push(new THREE.Face3(0, 3, 7));
  geometry.faces.push(new THREE.Face3(0, 7, 4));
  // Side 2: Connects v1 -> v2 -> v2ex -> v1ex
  geometry.faces.push(new THREE.Face3(1, 0, 4));
  geometry.faces.push(new THREE.Face3(1, 4, 5));
  // Side 3: Connects v2 -> v3 -> v3ex -> v2ex
  geometry.faces.push(new THREE.Face3(2, 1, 5));
  geometry.faces.push(new THREE.Face3(2, 5, 6));
  // Side 4: Connects v3 -> v4 -> v4ex -> v3ex
  geometry.faces.push(new THREE.Face3(3, 2, 6));
  geometry.faces.push(new THREE.Face3(3, 6, 7));

  // Critical: Compute normals for proper lighting/rendering
  geometry.computeFaceNormals();
  geometry.computeVertexNormals();

  // Keep your existing UV assignment
  geometry = this.helpers.assignUVs(geometry);

  // Create the mesh
  const mesh = new THREE.Mesh(geometry, this.wallMaterial);
  // ... rest of your code
}

2. Key Fixes Explained #

• Universal Thickness Direction: Using cross product ensures the thickness is always perpendicular to the wall, regardless of its orientation (no more hardcoding x-axis changes).
• Correct Offset Vertices: Each back vertex is simply the front vertex shifted by the thickness direction—no weird arithmetic like v2ex.x = v1ex.x +10 which breaks alignment.
• Consistent Vertex Order: All faces follow a counter-clockwise order (from the outside looking in), which tells Three.js the correct direction of the face (so it doesn't get culled or render incorrectly).
• Normal Calculation: Calling computeFaceNormals() and computeVertexNormals() is mandatory—without this, your material might look flat or invisible in certain lighting.

3. What Was Wrong With Your Original Code? #

Your offset vertex calculation for v2ex was incorrect (you were basing it on v1ex instead of v2), and some of your face vertex orders were reversed or misconnected. This led to broken geometry or faces that didn't render properly.

With this updated code, you'll get properly thick walls that work in any orientation, making it easy to assemble enclosed rooms.

内容的提问来源于stack exchange，提问作者EnginO