1. Introdução ao Sistema

O Serralheria Pro 3D é uma aplicação Web (SaaS) robusta e de alta performance, desenvolvida inteiramente para revolucionar a forma como serralheiros e vidraceiros criam projetos e orçamentos. Diferente de softwares tradicionais pesados (como AutoCAD ou SketchUp), este sistema roda direto no navegador, não exige instalação e possui foco exclusivo na usabilidade do trabalho com perfis metálicos, chapas e alvenaria.

2. Arquitetura e Motor 3D

O sistema é construído utilizando tecnologias modernas *Client-Side* (processamento no lado do cliente), o que garante velocidade instantânea nas operações.

• Motor Gráfico: Three.js (WebGL). Controla a renderização espacial, iluminação direcional, sombras (materials mesh standard) e manipulação vetorial dos objetos (Quaternions e Vector3).
• Armazenamento (State Management): Banco de Dados Local (LocalStorage). Salva instantaneamente qualquer alteração através das chaves cad_autosave_v33 (desenho), cad_mat_pro_v33 (materiais) e cad_company_v33 (dados da empresa).
• Geração de Texturas Genéricas: O sistema não depende de imagens externas para texturas (evitando lentidão). A parede de tijolos, por exemplo, é gerada via cálculos matemáticos no Canvas 2D nativo do HTML5 e convertida para textura 3D.
• Backend Link 3D: Comunicação nativa via fetch API com o arquivo salvar_projeto.php para escrever, no servidor web, o renderizador 3D "minificado" que será visualizado pelo cliente final.

3. Interface e Controles de Câmera

O visual foi planejado seguindo o padrão UI/UX de softwares de modelagem profissional (Dark Theme "Slim"), dividindo a área de trabalho em:

• Toolbar (Cabeçalho): Contém ferramentas do sistema, botões lógicos de arquivos e utilitários financeiros.
• Outliner (Menu Esquerdo): Árvore do projeto (Lista). Permite selecionar peças e organizar os elementos agrupados.
• Properties (Menu Direito): Propriedades da peça ativa (elevação, troca de material, rotação e alinhamento).
• Canvas (Centro): Mesa de trabalho com HUD inferior mostrando ângulo e elevação exatos da câmera.

Controles de Mouse

Ação	Comando
Orbitar / Girar	Segurar Botão Direito do mouse e arrastar
Zoom	Girar a Bolinha (Scroll) do mouse
Selecionar / Desenhar	Botão Esquerdo (Clique simples ou clique-arraste)
Seleção Múltipla	Segurar Shift + Botão Esquerdo nas peças desejadas

4. Ferramentas de Modelação (A Magia)

O motor conta com um sistema de física simulada e "imantismo" (Snap) avançado para garantir esquadro perfeito.

Magnetismo de Desenho e Altura

Ao desenhar uma peça com o cursor, o sistema detecta as pontas (esferas vermelhas) ou meios (esferas azuis) dos perfis existentes. Da mesma forma, ao mover uma peça no eixo Y (Altura), o sistema escaneia o Topo, Meio e Base das outras peças. Ao chegar próximo (5 centímetros), ele "puxa" a peça e cria uma Linha Guia Amarela Tracejada e emite a notificação visual ✨ Alinhado!.

Clone Inteligente & Auto-Seleção

Diferente de clonagens simples que sobrepõem objetos, a função "Clonar Peças" do Serralheria Pro calcula a espessura em milímetros do material atual, e clona a peça perfeitamente abaixo da original (eixo Z travado). Imediatamente, ele auto-seleciona as cópias e ativa a ferramenta Mover para facilitar a criação de grades e portões de lambril.

Alinhamento em Massa (Eixos)

Ao selecionar múltiplas peças, o menu 📐 Alinhar Peças surge. Ao clicar no Eixo (X, Y ou Z), o sistema varre o array de seleção e utiliza a posição matemática absoluta da primeira peça selecionada como mestre, transportando e alinhando todas as demais peças exatamente no mesmo vetor de cordenada.

5. Atalhos de Teclado Secretos

Desenhe até 3x mais rápido utilizando o teclado (Mão esquerda no teclado, mão direita no mouse).

Atalho	Função no Sistema
M	Oculta/Mostra caixas de medidas flutuantes (Opacidade de 100% para 5%) limpando a tela.
Setas (Sem seleção)	Navega (Pan) a mesa de desenho deslizando a câmera livremente.
Setas (Com seleção)	Move a(s) peça(s) no eixo horizontal (Frente/Trás/Lados). Precisão de 1cm.
W e S	Move a(s) peça(s) no eixo Vertical (Sobe e Desce).
Shift + Setas (ou W/S)	Move peças ou a câmera com velocidade 10x maior (Passos de 10cm).
Delete	Apaga a(s) peça(s) selecionada(s) imediatamente.

6. Gestão de Materiais e Financeiro

Todo o orçamento é gerado dinamicamente com base nas regras do Material Manager:

• Tipos Matemáticos: A escolha entre Perfil, Tubo ou Chapa altera dinamicamente como a geometria (BoxGeometry vs CylinderGeometry) será montada e como o orçamento será cobrado (por barras inteiras ou por Metro Quadrado exato).
• Importar/Exportar Tabelas: O botão "Salvar Lista (.json)" extrai o banco de dados de materiais atual. Se uma nova lista for importada e houver peças na mesa usando um "Material Antigo" que não existe na lista nova, o motor executa uma Função de Resgate (Fallback) aplicando o primeiro material válido da nova lista para impedir que o desenho "quebre".

7. Plano de Corte, PDF e Link 3D

✂️ Algoritmo do Plano de Corte

O sistema extrai um array de todas as medidas (Lengths) usadas e aplica o algoritmo de First Fit Decreasing (FFD). Ele ordena os recortes do maior tamanho para o menor, e vai empilhando-os dentro de "slots" virtuais de 6 metros, calculando o aproveitamento e a sobra exata (mostrando tudo em barras de progresso visuais na tela).

🖨️ PDF: Câmera com Auto-Focus Inteligente

Para evitar "prints" onde o portão sai cortado na nota fiscal, o evento de gerar PDF calcula a THREE.Box3() (Caixa limitadora global) do projeto atual milissegundos antes do print. A trigonometria (Math.tan(fov / 2)) afasta a câmera o suficiente para focar 100% do projeto, tira a foto em fundo branco puro (removendo grades e textos), e em seguida devolve a câmera ao local em que o usuário estava operando, sem piscar a tela agressivamente.

📱 Exportação do Link 3D

Um código fonte HTML limpo é injetado com um pacote JSON minificado contendo todo o estado do seu palco atual. Diferente do software principal, o link do cliente foi blindado: as etiquetas amarelas de medida são deletadas via Script Injetor (para o cliente não roubar as medidas), e o timer de validade da empresa é embutido diretamente no link via timestamp (Date.now()).