--- title: "Demo de configurador 3D de produtos: teste ao vivo — Dardo" description: "Teste um configurador 3D de produtos no navegador: mude as medidas, a madeira e a cor de uma estante e veja o modelo, as peças e o preço mudarem na hora." url: "https://dardo.studio/pt/ferramentas/demo-configurador-3d/" language: "pt" translations: {"en":"https://dardo.studio/en/tools/3d-product-configurator-demo/","es":"https://dardo.studio/es/herramientas/demo-configurador-3d/"} updated: "2026-11-08T12:00:00Z" --- Ferramentas gratuitas # Demo de configurador 3D Este é um configurador 3D de produtos que funciona de verdade, feito pela Dardo com uma estante modular fictícia para podermos mostrá-lo em público. Escolha a largura, a altura, a madeira e a cor da estrutura: o modelo 3D, as medidas, a lista de peças e um preço de exemplo mudam a cada escolha, e um link abre de novo exatamente a estante que você montou. Por [Nicolás Cerón](https://dardo.studio/pt/nicolas-ceron/) · Atualizado em 8 de nov. de 2026 · 6 min de leitura [Pedir uma proposta](https://dardo.studio/pt/contato/?service=3d-product-configurator) ![A estante de demonstração em 3D: dois módulos de prateleiras de carvalho natural em uma estrutura de aço grafite, com quatro gavetas embaixo](https://dardo.studio/work/product-configurator-poster.webp)Vista 3D. Estante com 162 cm de largura e 121 cm de altura. Prateleiras: Carvalho natural. Estrutura: Grafite. Fileira de baixo: Gavetas. Arraste para girar, ou use as setas do teclado. Arraste para girar **Campos do formulário** - 82 cm1 módulo - 162 cm2 módulos - 242 cm3 módulos - 322 cm4 módulos - 83 cm3 prateleiras - 121 cm4 prateleiras - 160 cm5 prateleiras - 198 cm6 prateleiras - Carvalho natural - Carvalho defumado - Nogueira - Freixo preto - Grafite - Branco giz - Vermelho ferrugem - Sálvia - Cobalto - Aberta - Portas - Gavetas ## Sua estante Medidas (largura × altura × profundidade) 162 × 121 × 38 cm Preço de exemplo US$ 950 Código da configuração SHELF-2X4-OAK-GRAPHITE-DRAWERS Um produto fictício com uma tabela de preços fictícia: mostra como o preço pode acompanhar cada escolha. O seu configurador usaria os seus próprios preços, regras e estoque. ### Lista de peças Colunas de aço 6 Travessas 12 Prateleiras 8 Gavetas 4 Sapatas niveladoras 6 ### Quer um para o seu produto? Envie esta configuração com algumas linhas sobre o que você vende e o que os seus clientes escolhem. Contamos como construiríamos o seu: opções e regras, modelos 3D, onde ele se conecta à sua loja ou aos seus orçamentos, e quanto custaria. ## Pontos-chave - Um único modelo 3D pode mostrar todas as versões de um produto: esta estante tem 960. - As medidas, a lista de peças e o preço vêm das mesmas regras que constroem o modelo, então nunca contradizem a imagem. - A demo não baixa arquivos 3D: a estante é construída no navegador a partir das medidas. - Tudo funciona com teclado, com movimento reduzido e sem a vista 3D. - Cada configuração é exportada em glTF (.glb) e, em aparelhos Apple, em USDZ para realidade aumentada. ## 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](https://dardo.studio/pt/servicos/configurador-3d-de-produtos/). ## Dúvidas antes de escolher **A estante é um produto real?** Não. É uma estante fictícia que a Dardo desenhou para esta demo, com preços e códigos inventados, para mostrar em público um configurador que funciona sem usar o produto de um cliente. O método é o mesmo que usaríamos num catálogo real: opções, regras, uma lista de peças e um preço que acompanham cada escolha. **Um configurador assim funciona na Shopify?** Sim. A Shopify mostra modelos 3D nas páginas de produto em todos os planos, e um configurador sob medida pode incluir as opções escolhidas na linha do carrinho como propriedades do item, que chegam ao pedido. Essas propriedades não mudam o preço, então opções que mudam precisam de uma variante por preço ou, na Shopify Plus, de uma função Cart Transform. **Do que vocês precisam para fazer um do nosso produto?** A lista de produtos e opções, as regras entre elas, de onde vêm os preços e os arquivos 3D ou CAD, desenhos, fotos e amostras de material que existirem. Um workshop transforma isso num mapa de opções e regras antes da modelagem, e uma primeira etapa prova o mapa numa família de produtos. **Um configurador 3D deixa a página de produto mais lenta?** Não deveria. Aqui o conteúdo e as opções chegam no HTML, o código 3D carrega depois e só quando a vista está na tela, e a vista só desenha quando algo muda. Um produto real acrescenta modelos comprimidos, então combinamos um orçamento de peso por produto e testamos num celular antes do lançamento. **Posso ver a estante no meu ambiente?** Num iPhone ou iPad, sim: o botão de RA transforma a sua configuração num arquivo USDZ que o AR Quick Look abre. O Scene Viewer do Android abre arquivos glTF a partir de um endereço web, então um configurador em produção geraria e publicaria o arquivo de cada configuração; esta demo oferece o download em .glb no lugar. ## Fontes e leituras adicionais Fontes desta página, com mais detalhes dos publicadores originais. - [three.js documentation: GLTFExporter and USDZExporter](https://threejs.org/docs/pages/USDZExporter.html) · threejs.org - [Khronos: glTF, the royalty-free format for 3D scenes and models](https://www.khronos.org/gltf/) · khronos.org - [Apple Developer: Quick Look gallery (USDZ in AR)](https://developer.apple.com/quick-look-gallery/) · developer.apple.com - [Google ARCore: Scene Viewer for the web](https://developers.google.com/ar/develop/scene-viewer) · developers.google.com - [Shopify Dev: Cart API reference (line item properties)](https://shopify.dev/docs/api/ajax/reference/cart) · shopify.dev - [Shopify Dev: Cart Transform Function API](https://shopify.dev/docs/api/functions/latest/cart-transform) · shopify.dev - [W3C: Understanding WCAG 2.2, Success Criterion 2.5.7 Dragging Movements](https://www.w3.org/WAI/WCAG22/Understanding/dragging-movements.html) · w3.org [Dardo](https://dardo.studio/pt/) · [Ferramentas gratuitas](https://dardo.studio/pt/ferramentas/) · Demo de configurador 3D ## Da demo ao seu configurador A demo mostra o método. Um configurador real começa pelo seu produto, pelas suas regras e por aonde cada pedido ou orçamento precisa chegar. [01 · **Configuradores 3D de produtos** · O que fazemos, como e quanto custa](https://dardo.studio/pt/servicos/configurador-3d-de-produtos/) · [02 · **Sites 3D interativos** · Cenas 3D que contam a sua história](https://dardo.studio/pt/servicos/sites-3d-interativos/) · [03 · **Fale com a Dardo** · Envie o seu produto e as opções](https://dardo.studio/pt/contato/?service=3d-product-configurator) ## Continue explorando. - [Serviço · **Configuradores 3D de produtos**](https://dardo.studio/pt/servicos/configurador-3d-de-produtos/) - [Serviço · **Sites 3D interativos com Three.js e WebGL**](https://dardo.studio/pt/servicos/sites-3d-interativos/) - [Serviço · **Desenvolvimento web para os EUA e a América Latina**](https://dardo.studio/pt/servicos/desenvolvimento-web/)