Crie seu primeiro configurador de sofás

Criar um configurador 3D interativo de sofás pode parecer complicado, mas com o Amaspace é um processo simples e guiado. Este tutorial passo a passo mostra como montar um configurador funcional para um sofá com vários materiais e cores, pronto para publicar na sua loja virtual.

Este guia é para gerentes de produto, equipes de e-commerce ou desenvolvedores que vão configurar um sofá personalizável pela primeira vez.

O que você vai aprender

• Como enviar o modelo base e os assets de apoio
• Como organizar a lógica de personalização com categorias e atributos
• Como vincular materiais e texturas ao modelo 3D
• Como configurar regras e lógica para uma experiência mais limpa
• Como publicar e visualizar o configurador

Passo 1: crie um novo produto

Comece clicando em "Create Product" no painel. Adicione as informações básicas do produto, como nome, descrição, preço e uma imagem de prévia. Envie também o modelo 3D base do sofá: é o asset principal com que o configurador vai trabalhar.

Depois de criado, o produto aparece na sua lista. Clique nele para abrir a página interna.

Passo 2: envie os assets adicionais

Aqui você envia os elementos de personalização preparados pelo seu artista 3D. Neste exemplo usamos dois materiais diferentes, cada um com suas próprias texturas integradas. Os assets se dividem em três tipos suportados:

• Model
• Material
• Texture

Neste passo a passo, vamos trabalhar só com materiais. Eles vão virar opções selecionáveis no configurador.

Passo 3: abra o 3D Editor

Com os assets enviados, clique no botão 3D Editor. É aqui que você define a lógica de configuração e a apresentação. Você verá duas barras laterais principais:

• Na barra lateral esquerda você cria e organiza categorias e atributos
• Na barra lateral direita você edita o item selecionado (por exemplo, define padrões ou vincula partes do modelo)

Passo 4: agrupe os atributos em uma categoria

No Amaspace, todo conjunto de opções personalizáveis precisa ficar dentro de uma Category. Isso deixa o editor organizado e fácil de ler. Neste exemplo, crie uma categoria com um nome como "Material e cor do sofá".

Dentro dessa categoria, você define atributos para cada opção de material.

Passo 5: crie os atributos de material

Agora crie dois atributos separados, um para cada material do sofá (por exemplo, "Opções de tecido" e "Opções de couro"). Cada um terá algumas variações de cor ou textura para o cliente escolher.

Passo 6: adicione PCOs pela Assets Library

Na parte de baixo da barra lateral esquerda, abra a Assets Library. Vá até a aba "Assets" e filtre por:

• "Current product" (produto atual)
• "Asset type": Material (tipo de asset: material)

Arraste os materiais desejados para o atributo correspondente. Eles se tornam PCOs (Product Customization Options). Depois de adicionados, você pode editar:

• Impacto no preço
• Nome de exibição
• Miniatura de prévia
• Seleção padrão

Passo 7: vincule os materiais ao modelo

Para as opções funcionarem, você precisa vinculá-las a partes específicas do modelo 3D.

• Selecione um atributo
• Use o Part Picker para clicar na zona de malha/material correspondente no modelo

Assim as escolhas do cliente atualizam o modelo em tempo real.

Passo 8: defina regras lógicas para uma UX mais limpa

Você quer evitar que o usuário escolha opções dos dois atributos ao mesmo tempo. Para isso, crie regras:

• Cada regra tem uma Condition (por exemplo, "Se Tecido estiver selecionado")
• e uma Action (por exemplo, "Definir o atributo Couro como nenhum")

Você precisa de uma regra para cada combinação conflitante. Assim só um grupo fica ativo por vez e você evita configurações inconsistentes.

Duplicar e editar regras existentes deixa esse processo bem mais rápido.

Passo 9: ajuste a visão da câmera no Scene Editor

Para mostrar o produto da melhor forma, abra o 3D Scene Editor.

• Abra a seção "Camera" na barra lateral direita
• Escolha a visão Configurator
• Ajuste a posição da câmera com o mouse ou o trackpad
• Quando encontrar o enquadramento ideal, clique em "Save"

Assim o usuário vê a perspectiva certa assim que a página carrega.

Passo 10: ative um ambiente padrão

No mesmo editor, ative o ambiente 3D padrão pelo seletor. Ele adiciona um cenário com piso refletivo para uma visualização mais realista.

Passo 11: publique o produto

Volte ao editor do produto e clique em Manage → Publish. Isso deixa o configurador disponível para pré-visualização ao vivo e testes.

Passo 12: visualize e teste

Clique nos grupos de materiais e nas texturas disponíveis. Você verá o preço atualizar, o modelo responder a cada escolha e as regras lógicas bloquearem combinações inválidas.

Resumo

Em poucos passos guiados, você criou um configurador 3D de sofás funcional com:

• Duas famílias de materiais
• Atualizações do modelo em tempo real
• Lógica de preços personalizada
• Interface limpa e fácil de usar

Essa configuração pode servir de modelo repetível para outros tipos de produto do seu catálogo. Se quiser ampliar o configurador com visualização em AR ou integração com showroom, continue com os nossos guias na próxima seção.