Save plan in Lovable

.lovable/plan.md

@@ -1,50 +1,50 @@
-- Aplicação WebXR de Inspeção Industrial para Quest 3
 
-### Página 1 — Tela Inicial
 
-- Logo e título "Inspeção de Qualidade — TrackkSteelXR"
-- Botão "Importar Modelo GLB" para upload do arquivo 3D (escala 1:1, mm)
-- Botão "Entrar em Modo XR" que inicia sessão WebXR imersiva com passthrough
-- Indicador de status de conexão XR (compatível/incompatível)
+## Plano: Wireframe com apenas bordas externas (Edge Lines)
 
-### Página 2 — Visualizador 3D (modo desktop/preview)
+### 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.
 
-- Cena Three.js com o modelo GLB carregado, com órbita livre para pré-visualização
-- Painel lateral com informações do modelo (dimensões, nome do arquivo, escala)
-- Grid de referência com unidades em milímetros
-- Botão para entrar em modo XR imersivo
+### 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
 
-### Página 3 — Modo XR Imersivo (Passthrough)
+### Implementacao
 
-**Ancoragem:**
+**1. Novo render mode no store (`useModelStore.ts`)**
+- Alterar `RenderMode` de `'solid' | 'wireframe'` para `'solid' | 'wireframe' | 'edges'`
+- Adicionar `edgeThresholdAngle: number` (default 15) e setter
 
-- Tentativa automática de Image Tracking via WebXR para detectar QR Code impresso
-- Se Image Tracking falhar: fallback para posicionamento manual — o modelo aparece à frente do usuário e pode ser arrastado com o controlador
+**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
 
-**Modelo 3D sobreposto:**
+**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
 
-- Renderização do GLB ancorado no espaço real, estático em relação ao ponto de ancoragem
-- O usuário pode caminhar ao redor da peça e inspecioná-la
+**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)
 
-**Fine Tuning (Ajuste Fino):**
+### Detalhes tecnicos
 
-- Ao segurar o botão Grip: ativa modo de ajuste
-- Joystick esquerdo: mover modelo em X/Y (incrementos de 1mm)
+```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)
+```
 
-Joystick direito: mover em Z e rotacionar (incrementos de 0.1°)
+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.
 
-- HUD flutuante mostrando os offsets atuais (posição em mm e rotação em graus)
-- Botão para resetar posição ao ponto original
-
-**HUD de Inspeção:**
-
-- Painel flutuante com nome da peça e status
-- Botão "Aprovar" e "Reprovar" para registrar resultado da inspeção
-- Indicador visual do modo atual (Tracking / Manual / Fine Tuning)
-
-### Tecnologias
-
-- React Three Fiber (v8) + Three.js para renderização 3D
-- WebXR API nativa para sessão imersiva e passthrough
-- @react-three/drei para helpers (GLB loader, gizmos)
-- @react-three/xr para integração WebXR com React