gpt-engineer-app[bot]
51 lines
2.6 KiB
Markdown
51 lines
2.6 KiB
Markdown
|
|
|
|
## 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.
|
|
|