gpt-engineer-app[bot]
1.9 KiB
1.9 KiB
- 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)
Página 2 — Visualizador 3D (modo desktop/preview)
- 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
Página 3 — Modo XR Imersivo (Passthrough)
Ancoragem:
- 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
Modelo 3D sobreposto:
- 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
Fine Tuning (Ajuste Fino):
- Ao segurar o botão Grip: ativa modo de ajuste
- Joystick esquerdo: mover modelo em X/Y (incrementos de 1mm)
Joystick direito: mover em Z e rotacionar (incrementos de 0.1°)
- 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