Changes

src/components/three/ModelViewer.tsx

@@ -27,6 +27,7 @@ function GLBModel({ url }: { url: string }) {
   const renderMode = useModelStore((s) => s.renderMode);
   const wireframeColor = useModelStore((s) => s.wireframeColor);
   const wireframeThickness = useModelStore((s) => s.wireframeThickness);
+  const edgeThresholdAngle = useModelStore((s) => s.edgeThresholdAngle);
   const checklist = useModelStore((s) => s.checklist);
   const fineTuning = useModelStore((s) => s.fineTuning);
 
@@ -39,6 +40,9 @@ function GLBModel({ url }: { url: string }) {
     return { size, center };
   }, [scene]);
 
+  // Store original colors so we can restore them
+  const originalColors = useRef<Map<THREE.Material, THREE.Color>>(new Map());
+
   useEffect(() => {
     const hasRejected = checklist.some(i => i.status === 'rejected');
     const allApproved = checklist.every(i => i.status === 'approved');
@@ -50,31 +54,64 @@ function GLBModel({ url }: { url: string }) {
         } else {
           child.material = child.material.clone();
         }
+
+        // Clean up previous edge lines
+        const toRemove: THREE.Object3D[] = [];
+        child.children.forEach(c => {
+          if (c.userData.__edgeLine) toRemove.push(c);
+        });
+        toRemove.forEach(c => {
+          if (c instanceof THREE.LineSegments) {
+            c.geometry.dispose();
+            (c.material as THREE.Material).dispose();
+          }
+          child.remove(c);
+        });
+
         const materials = Array.isArray(child.material) ? child.material : [child.material];
         materials.forEach((mat: THREE.Material) => {
           if (mat instanceof THREE.MeshStandardMaterial) {
-            mat.transparent = opacity < 1;
-            mat.opacity = opacity;
-            mat.wireframe = renderMode === 'wireframe';
-            if (renderMode === 'wireframe') {
-              mat.wireframeLinewidth = wireframeThickness;
+            // Store original color on first encounter
+            if (!originalColors.current.has(mat)) {
+              originalColors.current.set(mat, mat.color.clone());
             }
-            mat.needsUpdate = true;
-            mat.needsUpdate = true;
-            if (renderMode === 'wireframe') {
-              mat.color.set(wireframeColor);
-            } else if (hasRejected) {
-              mat.color.setHSL(0, 0.7, 0.5);
-            } else if (allApproved) {
-              mat.color.setHSL(0.38, 0.7, 0.45);
+
+            if (renderMode === 'edges') {
+              mat.visible = false;
             } else {
-              mat.color.set(0x8899aa);
+              mat.visible = true;
+              mat.transparent = opacity < 1;
+              mat.opacity = opacity;
+              mat.wireframe = renderMode === 'wireframe';
+              if (renderMode === 'wireframe') {
+                mat.wireframeLinewidth = wireframeThickness;
+                mat.color.set(wireframeColor);
+              } else if (hasRejected) {
+                mat.color.setHSL(0, 0.7, 0.5);
+              } else if (allApproved) {
+                mat.color.setHSL(0.38, 0.7, 0.45);
+              } else {
+                mat.color.set(0x8899aa);
+              }
             }
+            mat.needsUpdate = true;
           }
         });
+
+        // Create edge lines for edges mode
+        if (renderMode === 'edges' && child.geometry) {
+          const edgesGeo = new THREE.EdgesGeometry(child.geometry, edgeThresholdAngle);
+          const lineMat = new THREE.LineBasicMaterial({
+            color: wireframeColor,
+            linewidth: wireframeThickness,
+          });
+          const lineSegments = new THREE.LineSegments(edgesGeo, lineMat);
+          lineSegments.userData.__edgeLine = true;
+          child.add(lineSegments);
+        }
       }
     });
-  }, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness]);
+  }, [scene, opacity, renderMode, checklist, wireframeColor, wireframeThickness, edgeThresholdAngle]);
 
   const rotYRad = (fineTuning.rotY * Math.PI) / 180;