Changes
Co-authored-by: Reifonas <211114984+Reifonas@users.noreply.github.com>
This commit is contained in:
+35
-36
@@ -1,44 +1,43 @@
|
||||
# Plano: Mini-menu de Captura (Foto + Vídeo) no Modo AR
|
||||
|
||||
## Objetivo
|
||||
Adicionar dentro do HUD flutuante do modo AR um pequeno menu de captura com:
|
||||
- **📸 Foto** — screenshot do canvas (já existe lógica, expor no AR)
|
||||
- **● Gravar / ⏸ Pausar / ▶ Retomar / ■ Parar** — gravação de vídeo do canvas WebXR
|
||||
## Modo Posicionar (desktop)
|
||||
|
||||
## O que será implementado
|
||||
Permite que, antes de entrar no AR, o usuário mova e gire a peça **ativa** com o mouse — exatamente como faria com o controle no AR. As outras peças permanecem travadas. Ao desativar o botão, todas ficam fixas nas posições atuais e o estado persiste (já temos `savePlacement` por `fileName`).
|
||||
|
||||
### 1. Novo hook `useCanvasRecorder` (`src/hooks/useCanvasRecorder.ts`)
|
||||
- Usa `canvas.captureStream(30)` + `MediaRecorder` (codec `video/webm;codecs=vp9` com fallback p/ vp8).
|
||||
- Estados expostos: `status` (`idle | recording | paused`), `elapsedMs`.
|
||||
- Métodos: `start()`, `pause()`, `resume()`, `stop()`.
|
||||
- Ao parar: monta `Blob` webm, gera `URL.createObjectURL`, dispara download automático (`tracksteel-AR-<timestamp>.webm`) e também salva uma referência opcional para galeria futura.
|
||||
- Captura screenshot via `canvas.toDataURL('image/png')` reutilizando o store (`addScreenshot`) — mesma lógica já presente em `XRHud.tsx`.
|
||||
### Comportamento
|
||||
|
||||
### 2. Nova aba "Captura" no HUD 3D (`src/components/three/XRHudInWorld.tsx`)
|
||||
- Adicionar tab `capture` (ícone 🎥) na barra de tabs (junto com Cena, Ferram., Inspeção, Compart., WebXR).
|
||||
- Componente `CaptureTab` com botões 3D (`XR3DButton`):
|
||||
- **📸 Foto** — chama screenshot, mostra toast "Foto capturada".
|
||||
- **● REC** (vermelho quando gravando) — inicia/para gravação.
|
||||
- **⏸ Pause / ▶ Resume** — alterna pausa (desabilitado quando idle).
|
||||
- **■ Stop** — finaliza e baixa o arquivo.
|
||||
- Texto de status: `● 00:12` em vermelho enquanto grava, amarelo quando pausado.
|
||||
- Indicador visual flutuante (pequeno círculo vermelho pulsante) visível mesmo com painel fechado quando estiver gravando — anexado ao `headLockRef`.
|
||||
- Botão **Posicionar** (ícone Move3D) na barra `ViewerControls`, ao lado de Medir.
|
||||
- Quando ativo:
|
||||
- `OrbitControls` é desabilitado (não conflitar com o arrasto da peça).
|
||||
- Cursor vira `move`.
|
||||
- Apenas a peça com `activeModelId` responde ao mouse. Clicar em outra peça troca a ativa e passa a manipulá-la (as outras voltam a ficar travadas).
|
||||
- **Arrastar com botão esquerdo** → translada no plano da câmera (X/Y da tela projetados para o mundo).
|
||||
- **Shift + arrastar esquerdo** ou **arrastar com botão do meio** → translada no eixo Z (profundidade) usando o movimento vertical do mouse.
|
||||
- **Arrastar com botão direito** → rotaciona: movimento horizontal = rotY (yaw), movimento vertical = rotX (pitch). **Shift + direito** = rotZ (roll).
|
||||
- Cada movimento atualiza `fineTuning` via `setFineTuning` da peça ativa, o que já dispara `savePlacement` (persistência entre sessões/entrar-sair do AR — mesma chave usada hoje).
|
||||
- Quando desativado: tudo volta ao normal (Orbit ativo, peças travadas onde foram deixadas). Modo Medir e Posicionar são mutuamente exclusivos.
|
||||
|
||||
### 3. Integração
|
||||
- O hook recebe o `<canvas>` via `document.querySelector('canvas')` (mesmo padrão usado em `XRHud.tsx`/`handleScreenshot`).
|
||||
- Nenhuma mudança no store global é necessária — o estado de gravação vive no hook, instanciado no nível do `XRSession.tsx` e passado por props ao `XRHudInWorld`, OU mantido dentro do próprio `CaptureTab` via singleton simples.
|
||||
### Arquivos a alterar
|
||||
|
||||
## Detalhes técnicos
|
||||
- `MediaRecorder` com `canvas.captureStream(30)` funciona dentro de sessão WebXR no Quest 3 (Chromium-based browser do Quest suporta).
|
||||
- Áudio do microfone **não** será incluído (pode ser adicionado depois se solicitado).
|
||||
- Vídeo gerado é `.webm`; o usuário pode converter para `.mp4` fora do app se quiser.
|
||||
- O download é feito ao parar a gravação — o arquivo aparece no armazenamento do Quest (pasta Downloads do browser).
|
||||
1. **`src/stores/useModelStore.ts`**
|
||||
- Adicionar `positionMode: boolean` + `setPositionMode(on)`.
|
||||
- Em `setPositionMode(true)` desligar `measureMode`; e vice-versa em `setMeasureMode`.
|
||||
|
||||
## Arquivos afetados
|
||||
- `src/hooks/useCanvasRecorder.ts` (novo)
|
||||
- `src/components/three/XRHudInWorld.tsx` (nova tab + CaptureTab + indicador REC)
|
||||
2. **`src/components/three/ModelViewer.tsx`**
|
||||
- Novo componente `PositionDragHandler` (dentro do Canvas) que:
|
||||
- Escuta `pointerdown/move/up` no `gl.domElement` quando `positionMode` está on e existe `activeModelId`.
|
||||
- Converte delta de pixels em delta de mundo usando a distância câmera↔peça e o FOV (`2 * dist * tan(fov/2) / canvasHeight`), depois divide pelo `scaleRatio.factor` para gravar em coordenadas locais coerentes com `fineTuning`.
|
||||
- Aplica via `setFineTuning({ posX: ..., posY: ..., posZ: ..., rotX: ..., rotY: ..., rotZ: ... })`.
|
||||
- Em `OrbitControls`, definir `enabled={!positionMode && !measureMode}` (medir já não rotaciona hoje só por cursor, mas reforça).
|
||||
- Cursor: quando `positionMode`, setar `gl.domElement.style.cursor = 'move'`.
|
||||
|
||||
## Fora do escopo
|
||||
- Galeria de vídeos dentro do app (apenas download direto por enquanto).
|
||||
- Áudio/microfone na gravação.
|
||||
- Streaming/upload para nuvem.
|
||||
3. **`src/components/ViewerControls.tsx`**
|
||||
- Importar ícone `Move3D` do lucide.
|
||||
- Novo botão **Posicionar** com `variant={positionMode ? 'default' : 'outline'}` chamando `setPositionMode(!positionMode)`. Label dinâmica: `Posicionar` / `Posicionando — [nome da peça ativa]`.
|
||||
|
||||
### Detalhes técnicos
|
||||
|
||||
- A translação é gravada em `fineTuning.pos{X,Y,Z}` (espaço local da peça, antes do `renderFactor` da escala). Para que 1 pixel ↔ 1 mm visual fique coerente, o cálculo divide o delta-mundo por `scaleRatio.factor` (ex: em 1:50, mover 100 px arrasta o objeto 100 px de tela tanto na visualização quanto na coordenada interna).
|
||||
- Rotação em graus (já é o formato de `fineTuning.rotX/Y/Z`), sensibilidade ~`0.4°/px`.
|
||||
- O bloqueio de outras peças é automático: o handler só atualiza a `activeModelId`. Clicar em outra peça (handler `onClick` já existente em `GLBModel`) muda a ativa.
|
||||
- Persistência: `setFineTuning` já chama `savePlacement(fileName, fineTuning)`, então sair/voltar do AR mantém posições.
|
||||
- Sem mudanças no AR; apenas no viewer desktop.
|
||||
|
||||
Reference in New Issue
Block a user