Save plan in Lovable
This commit is contained in:
gpt-engineer-app[bot]
+37
-37
@@ -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"
|
## Plano: Wireframe com apenas bordas externas (Edge Lines)
|
||||||
- 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)
|
|
||||||
|
|
||||||
### 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
|
### Solucao
|
||||||
- Painel lateral com informações do modelo (dimensões, nome do arquivo, escala)
|
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:
|
||||||
- Grid de referência com unidades em milímetros
|
- Contorno externo do perfil
|
||||||
- Botão para entrar em modo XR imersivo
|
- 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
|
**2. Logica de edges no `ModelViewer.tsx` (`GLBModel`)**
|
||||||
- Se Image Tracking falhar: fallback para posicionamento manual — o modelo aparece à frente do usuário e pode ser arrastado com o controlador
|
- 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
|
**4. Nenhuma alteracao em:**
|
||||||
- O usuário pode caminhar ao redor da peça e inspecioná-la
|
- 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
|
```text
|
||||||
- Joystick esquerdo: mover modelo em X/Y (incrementos de 1mm)
|
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
|
|
||||||
Reference in New Issue
Block a user