Save plan in Lovable
This commit is contained in:
gpt-engineer-app[bot]
+55
-34
@@ -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
|
||||
|
||||
|
||||
Reference in New Issue
Block a user