Update index.html

index.html

@@ -15,7 +15,7 @@
   <input type="file" id="file1" accept=".txt"> File A<br>
   <input type="file" id="file2" accept=".txt"> File B<br><br>
   <button onclick="uploadFiles()">Visualize</button>
-  <label><input type="checkbox" id="showNormals" onchange="toggleNormals()"> Show Normal Vectors</label>
+  <label><input type="checkbox" id="showNormals" onchange="toggleNormals()"> Show Normal Vectors (Planes)</label>
   <div id="plot"></div>
 
   <script>
@@ -61,6 +61,46 @@
       return await res.json();
     }
 
+    function createPlaneTrace(x, y, z, nx, ny, nz, color) {
+      const size = 0.5;
+      let ux = 1, uy = 0, uz = 0;
+      if (Math.abs(nx) < 0.9) {
+        ux = 0; uy = 1; uz = 0;
+      }
+      let vx = ny * uz - nz * uy;
+      let vy = nz * ux - nx * uz;
+      let vz = nx * uy - ny * ux;
+      const len = Math.sqrt(vx**2 + vy**2 + vz**2);
+      vx /= len; vy /= len; vz /= len;
+      const wx = ny * vz - nz * vy;
+      const wy = nz * vx - nx * vz;
+      const wz = nx * vy - ny * vx;
+
+      const planePoints = [];
+      for (let dx of [-1, 1]) {
+        for (let dy of [-1, 1]) {
+          planePoints.push([
+            x + dx * vx * size + dy * wx * size,
+            y + dx * vy * size + dy * wy * size,
+            z + dx * vz * size + dy * wz * size
+          ]);
+        }
+      }
+
+      return {
+        type: 'mesh3d',
+        x: planePoints.map(p => p[0]),
+        y: planePoints.map(p => p[1]),
+        z: planePoints.map(p => p[2]),
+        i: [0, 0],
+        j: [1, 2],
+        k: [2, 3],
+        opacity: 0.5,
+        color: color,
+        visible: false
+      };
+    }
+
     function extractTraces(data, prefix, baseColor, normalColor) {
       for (const [tag, g] of Object.entries(data.geometry)) {
         const [x, y, z] = g.base_point;
@@ -75,15 +115,7 @@
           textposition: 'top center'
         });
 
-        normalTraces.push({
-          type: 'scatter3d',
-          mode: 'lines',
-          x: [x, x + nx],
-          y: [y, y + ny],
-          z: [z, z + nz],
-          line: { color: normalColor, width: 3 },
-          visible: false
-        });
+        normalTraces.push(createPlaneTrace(x, y, z, nx, ny, nz, normalColor));
       }
 
       for (const c of data.constraints) {
@@ -104,8 +136,8 @@
 
     function toggleNormals() {
       const checked = document.getElementById("showNormals").checked;
-      const update = normalTraces.map(trace => ({ ...trace, visible: checked }));
-      Plotly.react('plot', [...allTraces, ...update], {
+      const updatedTraces = normalTraces.map(t => ({ ...t, visible: checked }));
+      Plotly.react('plot', [...allTraces, ...updatedTraces], {
         margin: { t: 30 },
         scene: { aspectmode: 'data' },
         title: '3D Assembly Viewer'
@@ -113,4 +145,4 @@
     }
   </script>
 </body>
-</html>
+</html>