Demo de configurador 3D

Como usar a demo

1. Escolha as medidas: quatro larguras, de um a quatro módulos, e quatro alturas, de três a seis prateleiras.
2. Escolha os acabamentos: quatro madeiras para prateleiras e frentes, cinco cores de pintura eletrostática para a estrutura de aço e prateleiras abertas, portas ou gavetas na fileira de baixo.
3. Gire: arraste o modelo, use os botões embaixo dele, ou selecione-o pelo teclado e use as setas. Frente, Ângulo e Lateral pulam para vistas fixas.
4. Guarde: copie o link para abrir a mesma estante, baixe o modelo num arquivo .glb ou, num iPhone ou iPad, veja-o no seu ambiente com o AR Quick Look.
5. Envie: o último botão leva a sua configuração ao nosso formulário de contato, onde você acrescenta algumas linhas sobre o seu produto.

O que um configurador faz pelo comprador

Um configurador substitui a galeria com cada produto possível por um único modelo que acompanha as escolhas do comprador. Aqui, 4 larguras × 4 alturas × 4 madeiras × 5 cores × 3 tipos de frente somam 960 versões de uma mesma estante, sem fotografar nem renderizar nenhuma com antecedência.

• Regras: cada escolha muda as peças de que a estante precisa, então o modelo e a lista de peças sempre batem.
• Uma lista de peças: as colunas, travessas, prateleiras e frentes que um orçamento ou uma ordem de fabricação levaria.
• Um preço que acompanha a escolha: aqui vem de uma tabela fictícia; num projeto real, da sua tabela de preços, do seu ERP ou do seu CPQ.
• Um código de configuração e um link, para que um vendedor, um orçamento ou uma linha do carrinho levem a configuração exata.

Como é feito

A estante não é um arquivo 3D baixado. Ela é construída no navegador a partir das próprias medidas: cada coluna, travessa, prateleira e frente de gaveta é uma caixa posicionada pelas mesmas regras que contam as peças e calculam o preço, então a imagem e a lista de peças não se contradizem. O veio da madeira também é desenhado no navegador, então a vista 3D não baixa modelos nem texturas. Ela roda em three.js e WebGL e só desenha um quadro novo quando algo muda.

Para um produto real, costumamos partir dos seus arquivos CAD ou de modelos 3D existentes, convertê-los para glTF, o formato aberto que o Khronos Group mantém para o 3D na web, e comprimir a geometria e as texturas para o celular. O mesmo modelo é exportado depois para USDZ para o AR Quick Look da Apple, como a estante faz aqui.

Acessibilidade e orçamento de desempenho

• Cada opção é um controle de formulário padrão, então o configurador inteiro funciona com teclado e leitor de tela, e cada mudança é anunciada.
• Girar o modelo nunca exige arrastar: os botões e as setas do teclado fazem o mesmo, como pede o critério da WCAG 2.2 sobre movimentos de arrastar.
• Com a redução de movimento ativada no sistema, a câmera salta para cada vista em vez de deslizar.
• As medidas, a lista de peças e o preço estão no HTML da página e funcionam sem a vista 3D. Sem WebGL você vê uma imagem fixa; com a economia de dados ativada, a vista 3D espera você pedir.
• O código da vista 3D, com o three.js incluído, tem cerca de 160 KB comprimido e só carrega quando a vista aparece na tela. Os exportadores de .glb e de RA somam cerca de 10 KB cada, só quando usados.

O que esta demo deixa de fora

É uma demo, não um projeto de cliente: o produto, os preços e o código são inventados, e nada disso foi fabricado. Um configurador real precisa também do que este simula: as regras e exceções reais do seu produto, a sua tabela de preços, o estoque e os prazos de entrega, e a conexão com o carrinho, o orçamento ou o pedido. Esse é o trabalho do nosso serviço de configuradores 3D de produtos.

Dúvidas antes de escolher