Fix wireframe mode for cap meshes

app/three/SceneView.ts

@@ -3,7 +3,10 @@ import { buildMeshes } from "./utils/build-meshes";
 import { Extent, buildScene } from "./utils/build-scene";
 import { getMetadata } from "./utils/utils";
 import { MODEL_ID, SERVICE_URL } from "./config";
-import { buildClippingplanes } from "./utils/build-clipping-planes";
+import {
+  Orientation,
+  buildClippingplanes,
+} from "./utils/build-clipping-planes";
 import { buildCoordinateGrid } from "./utils/build-coordinate-grid";
 import { DragControls } from "three/examples/jsm/Addons.js";
 
@@ -60,11 +63,30 @@ export class SceneView {
   }
 
   toggleWireFrame() {
+    // Set global wireframe mode data
+    this._scene.userData.wireframe = !this._scene.userData.wireframe;
+
+    // Set wireframe for model
     const model = this._model;
     model.children.forEach((child) => {
       const material = (child as Mesh).material as MeshStandardMaterial;
       material.wireframe = !material.wireframe;
     });
+
+    // Set wireframe for any existing cap meshes
+    for (const key of Object.values(Orientation)) {
+      const name = `cap-mesh-group-${key}`;
+      const capMeshGroup = this._scene.getObjectByName(name);
+
+      if (capMeshGroup) {
+        capMeshGroup.children.forEach((mesh) => {
+          const material = (mesh as Mesh).material as MeshStandardMaterial;
+          if (material) {
+            material.wireframe = !material.wireframe;
+          }
+        });
+      }
+    }
   }
 }
 

app/three/utils/build-clipping-planes.ts

@@ -22,7 +22,7 @@ import { DragControls, OrbitControls } from "three/examples/jsm/Addons.js";
 import { Extent } from "./build-scene";
 import earcut from "earcut";
 
-enum Orientation {
+export enum Orientation {
   X = "x",
   Y = "y",
   Z = "z",
@@ -317,7 +317,13 @@ export function buildClippingplanes(
     }
 
     // Generate new cap meshes
-    const capMeshes = generateCapMeshes(meshes, plane, planes, orientation);
+    const capMeshes = generateCapMeshes(
+      meshes,
+      plane,
+      planes,
+      orientation,
+      scene
+    );
 
     // Add new cap meshes
     if (capMeshes.length > 0) {
@@ -456,7 +462,8 @@ function generateCapMeshes(
   meshes: Mesh[],
   plane: Plane,
   planes: Plane[],
-  orientation: Orientation
+  orientation: Orientation,
+  scene: Scene
 ) {
   const capMeshes: Mesh[] = [];
 
@@ -526,6 +533,7 @@ function generateCapMeshes(
         polygonOffsetFactor: offset,
         polygonOffsetUnits: offset,
         clippingPlanes,
+        wireframe: scene.userData.wireframe,
       });
 
       const localMeshes = polygons.map((polygon) => {
@@ -560,7 +568,7 @@ function buildPolygons(edges: Array<[Vector3, Vector3]>): Vector3[][] {
   const polygons: Vector3[][] = [];
   const edgeMap = new Map<string, [Vector3, Vector3]>();
 
-  // Populate the edgeMap for fast lookups
+  // Populate the edgeMap
   for (const [v1, v2] of edges) {
     edgeMap.set(`${v1.x},${v1.y},${v1.z}-${v2.x},${v2.y},${v2.z}`, [v1, v2]);
   }
@@ -604,10 +612,12 @@ function buildPolygons(edges: Array<[Vector3, Vector3]>): Vector3[][] {
         }
       }
 
-      if (!foundNextEdge) break; // Stop if no connected edge is found
+      // Stop if no connected edge is found
+      if (!foundNextEdge) break;
     }
 
-    if (polygon.length >= 3) polygons.push(polygon); // Ensure valid polygon with at least 3 vertices
+    // Ensure valid polygon with at least 3 vertices
+    if (polygon.length >= 3) polygons.push(polygon);
   }
 
   return polygons;

app/three/utils/build-scene.ts

@@ -92,6 +92,7 @@ export function buildScene(container: HTMLElement, extent: Extent) {
 
   // Scene will hold all our elements such as objects, cameras and lights
   scene = new Scene();
+  scene.userData.wireframe = false;
 
   // Add lights to the scene
   const lights = buildDefaultLights();