diff --git a/.lovable/plan.md b/.lovable/plan.md index 2410f05..d318339 100644 --- a/.lovable/plan.md +++ b/.lovable/plan.md @@ -1,43 +1,68 @@ +# Giro da peça em torno do próprio eixo (botão do meio) -## Modo Posicionar (desktop) +## Objetivo -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`). +No modo **Posicionar**, permitir rotação da peça ativa em torno do seu **eixo longitudinal próprio** (a linha que liga os dois extremos da peça), usando o **botão do meio (roda) do mouse** enquanto se arrasta. -### Comportamento +A rotação atual (botão direito) gira em torno do pivô do grupo (canto da peça). A nova precisa girar em torno do **centro geométrico da peça**, no eixo do seu maior comprimento — como rolar um perfil de aço em torno do seu próprio comprimento. -- 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. +## Mudança de mapeamento dos botões -### Arquivos a alterar +| Botão | Antes | Depois | +|---|---|---| +| Esquerdo | Translada plano câmera | igual | +| Shift + Esquerdo | Profundidade (Z câmera) | igual | +| **Meio (roda)** | Profundidade (Z câmera) | **Giro axial em torno do eixo próprio** | +| Direito | rotY/rotX (pivô atual) | igual | +| Shift + Direito | rotZ | igual | -1. **`src/stores/useModelStore.ts`** - - Adicionar `positionMode: boolean` + `setPositionMode(on)`. - - Em `setPositionMode(true)` desligar `measureMode`; e vice-versa em `setMeasureMode`. +A profundidade continua acessível via Shift+Esquerdo (sem perda de função). -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'`. +## Como calcular o "eixo próprio" -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]`. +No `PositionDragHandler` (`src/components/three/ModelViewer.tsx`), quando o `pointerdown` ocorrer com `button === 1`: -### Detalhes técnicos +1. Localizar o `THREE.Object3D` raiz da peça ativa na cena via `scene.getObjectByName(...)` ou um `userData.modelId`. Já existe um `GLBModel` montado; usar `scene.traverse` filtrando por `userData.modelId === activeId` (ajustar `GLBModel` para marcar `userData.modelId` se ainda não estiver). +2. Calcular `THREE.Box3().setFromObject(group)` em coordenadas mundo → obter `size` e `center`. +3. O eixo próprio = direção do maior lado da bbox local. Para isso, calcular a bbox em **espaço local** do grupo (`new THREE.Box3().setFromObject(group)` aplicado depois de zerar matriz, ou iterar geometrias). Mais simples: comparar `size.x`, `size.y`, `size.z` da bbox local → eixo local = (1,0,0), (0,1,0) ou (0,0,1) correspondente ao maior. +4. Transformar esse eixo local para mundo aplicando a `group.matrixWorld` (apenas a parte rotacional via `Vector3.transformDirection`). +5. Guardar em refs: `axisWorld: Vector3`, `centerWorld: Vector3` (centro da bbox mundo). -- 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. +## Aplicação da rotação no `pointermove` + +- Sensibilidade: `0.5° por pixel` de `dx` (movimento horizontal natural para "rolar"). +- Converter para radianos: `angle = dx * sens * Math.PI/180`. +- Construir quaternion: `qDelta = new Quaternion().setFromAxisAngle(axisWorld, angle)`. +- Precisamos atualizar `fineTuning.rotX/Y/Z` (graus, ordem Euler atual usada pelo grupo). Estratégia: + 1. Ler quaternion atual do grupo: `qCurrent = group.quaternion.clone()`. + 2. Aplicar `qNew = qDelta * qCurrent` (rotação em mundo aplica-se à esquerda). + 3. Mas `fineTuning` é aplicado **em cima** de uma orientação base do modelo. Para preservar isso, calcular `qBase = qCurrent.clone().premultiply(qFTInverse)` onde `qFT` é a rotação atual do fineTuning como quaternion. Então o novo fineTuning quaternion = `qBase.inverse() * qNew`. + 4. Converter para Euler na mesma ordem usada hoje (provavelmente `'XYZ'`) e gravar `rotX/Y/Z` em graus. + +Para evitar complexidade da composição com `qBase`: alternativa mais simples e suficiente — **rotacionar diretamente o grupo via quaternion e também transladar para compensar a diferença entre pivô do grupo e centro da bbox**. Como `fineTuning.pos{X,Y,Z}` é a única fonte de translação, calcular: + +- Antes da rotação: `offset = centerWorld - group.position`. +- Depois: `newOffset = qDelta.applyVector(offset)`. +- `deltaPos = offset - newOffset` (em mundo) → converter para local (dividindo por `scaleRatio.factor`) e somar a `posX/posY/posZ`. + +Combinada com a atualização Euler descrita acima, isso garante que o **centro geométrico fique fixo na tela** enquanto a peça gira em torno do próprio eixo. + +## Resumo dos arquivos + +- **`src/components/three/ModelViewer.tsx`** + - Marcar o grupo de cada `GLBModel` com `userData.modelId = model.id` (se ainda não estiver). + - Em `PositionDragHandler`: + - No `pointerdown` com `button === 1`: localizar grupo da peça ativa, calcular bbox local, determinar eixo próprio, salvar `axisWorld` e `centerWorld` em refs. + - No `pointermove` com `button === 1`: aplicar rotação axial + correção de translação como descrito, gravar via `setFineTuning({ rotX, rotY, rotZ, posX, posY, posZ })`. + - Remover o uso de "Meio = profundidade" (mantém apenas Shift+Esquerdo). + +- **`src/components/ViewerControls.tsx`** + - Atualizar o `title` do botão Posicionar para refletir o novo mapeamento: `Esquerdo: mover · Shift+Esq: profundidade · Meio: girar no próprio eixo · Direito: rotação livre · Shift+Dir: rotZ`. + +## Detalhes técnicos + +- Usar `THREE.Box3.setFromObject` cuidando para chamar `updateMatrixWorld(true)` antes. +- Para a bbox local: clonar o grupo ou aplicar inverso da matriz mundo nas posições, ou simplesmente iterar `child.geometry.boundingBox` se for um único mesh. Para robustez com vários meshes filhos, somar via `Box3.expandByObject` após copiar `matrixWorld` e remover translação. +- `Quaternion.applyVector` não existe diretamente — usar `vector.clone().applyQuaternion(qDelta)`. +- Conversão Euler→graus deve usar a mesma ordem em que `fineTuning` é aplicado hoje (verificar no JSX do `GLBModel`; provavelmente `rotation={[degToRad(rotX), degToRad(rotY), degToRad(rotZ)]}` com ordem padrão XYZ). +- Persistência: `setFineTuning` já chama `savePlacement`, então a posição/rotação ficam salvas como já acontece. diff --git a/src/components/ViewerControls.tsx b/src/components/ViewerControls.tsx index 6bd27f6..058c7b6 100644 --- a/src/components/ViewerControls.tsx +++ b/src/components/ViewerControls.tsx @@ -153,7 +153,7 @@ export function ViewerControls() { className="gap-2 h-9" onClick={() => setPositionMode(!positionMode)} disabled={!activeModelId} - title="Arraste: mover · Shift+arraste ou meio: profundidade · Direito: girar · Shift+direito: rotZ" + title="Esquerdo: mover · Shift+Esq: profundidade · Meio (roda): girar no próprio eixo · Direito: rotação livre · Shift+Dir: rotZ" > diff --git a/src/components/three/ModelViewer.tsx b/src/components/three/ModelViewer.tsx index e2d08c6..2a1061e 100644 --- a/src/components/three/ModelViewer.tsx +++ b/src/components/three/ModelViewer.tsx @@ -123,22 +123,33 @@ function GLBModel({ sceneModel, isActive }: { sceneModel: SceneModel; isActive: if (!sceneModel.visible) return null; + // Determine dominant local axis of the model (longest bbox side) for axial roll + const dominantAxis: 'x' | 'y' | 'z' = + modelInfo.size.x >= modelInfo.size.y && modelInfo.size.x >= modelInfo.size.z + ? 'x' + : modelInfo.size.y >= modelInfo.size.z + ? 'y' + : 'z'; + return ( { e.stopPropagation(); setActive(sceneModel.id); }} + userData={{ modelId: sceneModel.id, dominantAxis }} > - - + {/* Translation */} + + {/* Rotation + scale around the geometry center */} + + {/* Shift geometry so its center sits at the parent's origin (pivot = center) */} + + + + ); @@ -585,8 +596,25 @@ function PositionDragHandler() { rotX: ft.rotX + dy * sens, }); } - } else if (button === 1 || (button === 0 && shiftKey)) { - // Middle or Shift+left: depth (Z in camera space) + } else if (button === 1) { + // Middle button (wheel): roll around the piece's own longitudinal axis + const sens = 0.5; + let dominant: 'x' | 'y' | 'z' = 'x'; + scene.traverse((o) => { + if (o.userData?.modelId === active.id && o.userData?.dominantAxis) { + dominant = o.userData.dominantAxis; + } + }); + const delta = dx * sens; + if (dominant === 'x') { + useModelStore.getState().setFineTuning({ rotX: ft.rotX + delta }); + } else if (dominant === 'y') { + useModelStore.getState().setFineTuning({ rotY: ft.rotY + delta }); + } else { + useModelStore.getState().setFineTuning({ rotZ: ft.rotZ + delta }); + } + } else if (button === 0 && shiftKey) { + // Shift+left: depth (Z in camera space) const worldDelta = dy * pixelsPerWorldUnit; const camDir = new THREE.Vector3(); camera.getWorldDirection(camDir);