diff --git a/.lovable/plan.md b/.lovable/plan.md index ff9726a..305e3f2 100644 --- a/.lovable/plan.md +++ b/.lovable/plan.md @@ -1,50 +1,71 @@ -## Plano: Wireframe com apenas bordas externas (Edge Lines) +## Plano: Ferramentas de Medicao Inteligentes (Smart Snap + Auto-Detect) -### 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. +### 3 Funcionalidades -### 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 +**1. Vertex Snap (snap magnetico)** +- No `MeasureClickHandler`, ao mover o mouse, fazer raycast continuo (`onPointerMove`) +- Para cada hit, buscar o vertice mais proximo do ponto de intersecao na geometria do mesh +- Se a distancia ao vertice mais proximo for menor que um threshold (ex: 5px em screen space), "snapar" para esse vertice +- Renderizar um marcador visual (anel/circulo amarelo) no vertice snappado via `MeasurementOverlay` +- Ao clicar, usar o ponto snappado em vez do ponto bruto do raycast +- Novo state no store: `snapPoint: MeasurePoint | null` e `setSnapPoint` -### Implementacao +**2. Auto-detect diametro de furos (hover)** +- Ao fazer hover sobre uma face, analisar a geometria local: + - Coletar as edges do `EdgesGeometry` que formam um loop fechado (circulo/oblongo) proximo ao ponto de hover + - Alternativa mais robusta: analisar os vertices ao redor do ponto de intersecao, detectar se formam um arco/circulo usando fitting de circulo (least-squares circle fit nos vertices vizinhos) + - Abordagem pratica: usar as normais das faces -- furos em chapas tem faces com normais apontando para o centro do furo. Agrupar faces cilindricas coplanares e calcular o raio +- Apos 1 segundo de hover estavel (debounce), mostrar tooltip HTML com o diametro em mm (1 casa decimal) +- Novo state: `hoverInfo: { type: 'hole' | 'edge', position: [x,y,z], value: number } | null` -**1. Novo render mode no store (`useModelStore.ts`)** -- Alterar `RenderMode` de `'solid' | 'wireframe'` para `'solid' | 'wireframe' | 'edges'` -- Adicionar `edgeThresholdAngle: number` (default 15) e setter +**3. Auto-detect comprimento de aresta (hover)** +- Ao hover proximo de uma edge line, identificar o segmento de aresta mais proximo +- Calcular o comprimento desse segmento em mm +- Apos 1 segundo de hover estavel, mostrar tooltip com o comprimento -**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 +### Arquivos a modificar -**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 +**`src/stores/useModelStore.ts`** +- Adicionar `snapPoint`, `setSnapPoint`, `hoverInfo`, `setHoverInfo` -**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) +**`src/components/three/ModelViewer.tsx`** +- Novo componente `SmartSnapHandler`: useFrame com raycast no mouse, busca vertice mais proximo, atualiza `snapPoint` +- Novo componente `HoverDetector`: onPointerMove com debounce de 1s, analisa geometria para detectar furos (faces cilindricas) e arestas, atualiza `hoverInfo` +- Atualizar `MeasurementOverlay` para renderizar o snap marker (anel amarelo) e o tooltip de hover +- Atualizar `MeasureClickHandler` para usar `snapPoint` quando disponivel + +**`src/components/three/SmartMeasure.tsx`** (novo) +- Logica de deteccao de furos: analise de curvatura local dos vertices +- Logica de deteccao de arestas: segmentos de EdgesGeometry mais proximos ao cursor +- Funcoes utilitarias: `findNearestVertex`, `detectHoleRadius`, `findNearestEdge` ### 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) +Vertex Snap: + raycast hit → mesh.geometry.attributes.position + → iterar vertices, transformar para world space (mesh.matrixWorld) + → projetar para screen space (camera.project) + → encontrar o mais proximo em pixels (threshold ~8px) + → mostrar anel amarelo nesse ponto + +Deteccao de Furos: + raycast hit face → pegar faceIndex + → coletar faces vizinhas com normal similar (cilindrica) + → extrair vertices do loop de borda dessas faces + → circle fit (least squares) → raio → diametro em mm + → mostrar tooltip apos 1s de hover estavel + +Deteccao de Arestas: + EdgesGeometry ja calculada → array de segmentos [v1, v2] + → projetar todos para screen space + → encontrar segmento mais proximo ao cursor + → comprimento = distancia 3D * 1000 (mm) + → mostrar tooltip apos 1s de hover estavel ``` -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. +### Sem alteracoes em +- Checklist, compare mode, screenshots, fine tuning, import OBJ/STL/IFC, render modes