## Plano: Wireframe com apenas bordas externas (Edge Lines) ### Problema O modo wireframe atual usa `material.wireframe = true`, que renderiza **todas as arestas de cada triângulo** da malha. Para perfis estruturais (HP250), isso gera um excesso de linhas internas que dificulta a visualização. ### Solucao Usar `THREE.EdgesGeometry` com um angulo limite (threshold angle) para extrair apenas as **arestas de contorno** -- bordas onde faces adjacentes formam angulos superiores ao limite. Isso preserva: - Contorno externo do perfil - Furos e recortes - Chapas soldadas - Elimina linhas internas de faces coplanares ### Implementacao **1. Novo render mode no store (`useModelStore.ts`)** - Alterar `RenderMode` de `'solid' | 'wireframe'` para `'solid' | 'wireframe' | 'edges'` - Adicionar `edgeThresholdAngle: number` (default 15) e setter **2. Logica de edges no `ModelViewer.tsx` (`GLBModel`)** - Quando `renderMode === 'edges'`: - Percorrer a cena, para cada `Mesh`: - Tornar o material original invisivel (`visible = false`) ou semi-transparente - Criar um `THREE.EdgesGeometry(mesh.geometry, thresholdAngle)` - Criar `THREE.LineSegments` com `LineBasicMaterial` usando `wireframeColor` - Adicionar como filho do mesh (e limpar ao trocar de modo) - O threshold angle controla quais arestas aparecem: angulos menores = menos linhas - Quando `renderMode !== 'edges'`: remover os `LineSegments` criados e restaurar visibilidade **3. UI no `ViewerControls.tsx`** - Trocar o botao wireframe para um ciclo de 3 modos: Solido -> Wireframe -> Bordas - Ou adicionar um botao separado "Bordas" ao lado do wireframe - No popover de configuracao do wireframe, adicionar um slider "Angulo Limite" (1-45 graus) que controla o threshold do `EdgesGeometry` -- valores menores mostram menos linhas - O slider de cor e espessura ja existentes se aplicam tambem ao modo edges **4. Nenhuma alteracao em:** - Medicoes, checklist, compare mode, screenshots, fine tuning, IFC/OBJ/STL import - O raycasting de medicao continua funcionando pois os meshes originais permanecem na cena (apenas invisiveis) ### Detalhes tecnicos ```text Modo Solid: mesh.material.visible = true, sem LineSegments Modo Wireframe: mesh.material.wireframe = true, sem LineSegments Modo Edges: mesh.material.visible = false, + LineSegments(EdgesGeometry) ``` O `EdgesGeometry(geometry, thresholdAngle)` do Three.js analisa o angulo diedro entre faces adjacentes. Se o angulo excede o threshold, a aresta e incluida. Para perfis de aco, um threshold de ~15-20 graus deve capturar bem as bordas estruturais sem as subdivisoes internas.