Improving Wall Edge Transitions in Three.js

Based on your description, you're experiencing issues with wall intersections when using extruded shapes, especially as wall thickness increases. Here are some approaches to create smoother or more aesthetically pleasing edge transitions:

1. Use EdgeSplitModifier

The EdgeSplitModifier in Three.js is designed to modify geometry by "dissolving" edges to make them appear smoother. This could help with your wall intersections:

JAVASCRIPTCopied
import { EdgeSplitModifier } from 'three/examples/jsm/modifiers/EdgeSplitModifier.js';

// After creating your wall mesh
const edgeSplitModifier = new EdgeSplitModifier();
const smoothedGeometry = edgeSplitModifier.modify(
  wallMesh.geometry, 
  Math.PI / 6,  // cutOffAngle - controls smoothness
  true          // tryKeepNormals
);

wallMesh.geometry = smoothedGeometry;

2. Create Unified Wall Geometry

Instead of creating separate extruded shapes for each wall, consider creating a single unified shape that represents the floor plan with proper wall thickness:

JAVASCRIPTCopied
// Create a single shape for the entire floor plan
const floorShape = new THREE.Shape();
const lines = data.lines;

// Start at the first point
floorShape.moveTo(lines[0].p1.x, lines[0].p1.y);

// Add all lines to the shape
lines.forEach(line => {
  floorShape.lineTo(line.p2.x, line.p2.y);
});

// Close the shape
floorShape.closePath();

// Create a path for the inner shape (accounting for wall thickness)
const holePath = new THREE.Path();
// Calculate inner points based on wall thickness and create inner path
// ...

floorShape.holes.push(holePath);

// Extrude the shape
const extrudeSettings = {
  depth: data.lines[0].wallHeight,
  bevelEnabled: false
};

const geometry = new THREE.ExtrudeGeometry(floorShape, extrudeSettings);
const wallMesh = new THREE.Mesh(geometry, wallMaterial);

3. Add Bevels to Wall Corners

You can enable beveling in your extrusion settings to create smoother transitions at corners:

JAVASCRIPTCopied
const extrudeSettings = {
  depth: wallHeight,
  bevelEnabled: true,
  bevelThickness: thickness * 0.2,
  bevelSize: thickness * 0.1,
  bevelSegments: 3
};

4. Create Custom Corner Geometry

For more control, you could detect wall intersections and create custom geometry for corners:

JAVASCRIPTCopied
// For each intersection point
function createCornerGeometry(point, connectedWalls) {
  // Create a custom geometry for the corner
  // This could be a cylinder or other shape that smoothly connects the walls
  const cornerGeometry = new THREE.CylinderGeometry(
    wallThickness / 2,
    wallThickness / 2,
    wallHeight,
    8
  );
  
  // Position and orient the corner geometry
  const cornerMesh = new THREE.Mesh(cornerGeometry, wallMaterial);
  cornerMesh.position.set(point.x, wallHeight / 2, point.y);
  
  return cornerMesh;
}

5. CSG (Constructive Solid Geometry)

For complex intersections, you might want to use CSG operations to create proper unions of your wall geometries:

JAVASCRIPTCopied
// You'll need to import a CSG library like three-csg-ts
import { CSG } from 'three-csg-ts';

// Create individual wall meshes
const wallMeshes = lines.map(line => createWallMesh(line));

// Union all wall meshes
let resultMesh = wallMeshes[0];
for (let i = 1; i < wallMeshes.length; i++) {
  const csgResult = CSG.union(resultMesh, wallMeshes[i]);
  resultMesh = csgResult;
}

scene.add(resultMesh);

Each of these approaches has different trade-offs in terms of complexity and visual quality. The EdgeSplitModifier might be the simplest to implement first, while the unified geometry approach would likely give the cleanest results for architectural visualization.