SteelXR2/.lovable/plan.md

Giro da peça em torno do próprio eixo (botão do meio)

Objetivo

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.

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.

Mudança de mapeamento dos botões

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

A profundidade continua acessível via Shift+Esquerdo (sem perda de função).

Como calcular o "eixo próprio"

No PositionDragHandler (src/components/three/ModelViewer.tsx), quando o pointerdown ocorrer com button === 1:

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).

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.