Configurador 3D de alianças — fotorrealista, em tempo real, diretamente no navegador.
Esta demo ao vivo mostra o que entendemos por um configurador de produto 3D de gama alta: renderização WebGL real com reflexos de estúdio, quatro metais preciosos, perfis de aro selecionáveis e um brilho de diamante vivo — fluido no desktop e no telemóvel. Assim construímos configuradores para joalheiros, fabricantes de joias e produtos B2B exigentes.
Demo ao vivo: configure você mesmo
Escolha o metal, o perfil do aro e a cravação da pedra, rode a aliança livremente e observe o brilho sob a luz de estúdio. Por motivos de desempenho, o motor 3D só carrega quando clica.
Nota: Demo puramente visual para ilustrar a qualidade de renderização. Qualquer "preço indicativo" seria uma estimativa do lado do cliente e não é vinculativo — em produção, a lógica de preços (margem, custo de material, cotação diária do metal) reside no servidor. Sem carrinho, sem catálogo, sem recolha de dados.
O que esta demo mostra tecnicamente
- 3D em tempo real no navegador via WebGL (Three.js / React Three Fiber) — sem plugin, sem aplicação
- Metais preciosos fisicamente realistas: ouro amarelo, branco e rosa, além de platina, com reflexos corretos
- Iluminação HDRI de estúdio para reflexos de softbox credíveis sobre o metal polido
- Quatro perfis de aro paramétricos (clássico, meio-redondo, plano, côncavo) — gerados ao vivo a partir da geometria
- Cravações de pedra (solitário e eternity) com brilho e fogo de diamante acoplados ao reflexo
- Layout responsivo, controlos táteis, foco de teclado e papéis ARIA
- Incorporado como widget isolado em Shadow DOM — sem conflitos de estilo com a página anfitriã
- Desempenho: carregamento diferido ao clicar, a renderização pausa automaticamente fora do ecrã
De atração visual a ferramenta de venda
Um configurador 3D como este é mais do que um efeito visual. Integrado corretamente, torna-se uma ferramenta de venda: traduz as escolhas do cliente numa configuração inequívoca, valida combinações permitidas, gera preço e lista de materiais e entrega o resultado de forma estruturada à loja, ao ERP ou ao processo de orçamentação — o mesmo pipeline que utilizamos na nossa automação de orçamentos e CPQ.
Para a versão de produção, ampliamos o núcleo da demo com regras reais de preço e validade, um catálogo de fabricantes/materiais, gravação, tamanhos, passagem para carrinho ou pedido e um backend de administração para produtos, preços e regras. Os preços são calculados no servidor; o navegador apenas apresenta o valor devolvido pela API.
Outros projetos de configuradores
Planeamento de vedações arrastar e largar com lista de materiais automática, preço ao vivo e passagem direta para o carrinho.
Ver o projeto →Configurador de 5 passos com pré-visualização 3D em tempo real, lista de materiais e saída em PDF.
Ver o projeto →Configuradores para produtos técnicos e processos CPQ com integração completa de ERP e loja.
Ver a abordagem →