Build a simple product configurator in Unity in one hour or less
Esta página da Web foi automaticamente traduzida para sua conveniência. Não podemos garantir a precisão ou a confiabilidade do conteúdo traduzido. Se tiver dúvidas sobre a precisão do conteúdo traduzido, consulte a versão oficial em inglês da página da Web.
Um configurador de produtos pode transformar a maneira como os clientes interagem com seus produtos, levando a experiência além da simples visualização de imagens estáticas para uma experiência interativa, que, em última análise, oferece ao usuário detalhes mais ricos e mais informações.
Em aplicações industriais, os configuradores podem exibir equipamentos complexos, permitir a personalização em tempo real e ajudar os clientes a visualizar os produtos em seus contextos específicos.
Neste tutorial, você criará seu primeiro configurador de produtos implantável na web em uma hora ou menos. Seu configurador permitirá que os usuários alterem diferentes materiais em um modelo 3D usando uma interface simples. Ao final, você terá compreendido os recursos fundamentais para a criação de configuradores de produtos profissionais.
Se preferir acompanhar este tutorial em vídeo, você pode assisti-lo aqui .
Para obter mais informações, confira nosso webinar sobre o assunto.Modelo de configuração de produto
Pré-requisitos
Este tutorial destina-se a desenvolvedores que possuem conhecimento de nível iniciante a intermediário no desenvolvimento de projetos em Unity. Para concluir o tutorial, você precisará...
1. Instale o seguinte :
- Unity 6 com suporte para compilação WebGL
- Uma licença de avaliação ou regular para o Unity Industry
- O pacote Industry Product Configurator da Unity, disponível no GitHub.
2. Adicionar um modelo 3D : Utilize seu próprio arquivo de modelo 3D ou o arquivo incluído no modelo.
3. Adicionar materiais básicos : Tenha à mão pelo menos 2 a 3 materiais diferentes ou reutilize os materiais metálicos já incluídos no tutorial.
Tempo estimado para conclusão : 30 a 60 minutos
Explore o projeto de exemplo
Este tutorial utiliza o projeto de exemplo Industry Product Configurator da Unity como base de aprendizado e ponto de partida. O exemplo demonstra um configurador completo e funcional com troca de materiais e componentes, controles de câmera e interface de usuário – exatamente os recursos que você aprenderá a implementar no exercício.
O exemplo inclui componentes prontos para uso para visibilidade, material, animação e variantes de transformação, para que você possa se concentrar no seu produto em vez de criar sistemas de variantes do zero.
Abra o projeto de exemplo e crie sua própria cena.
Ao explorar primeiro o projeto de exemplo, você obterá experiência prática com um configurador de produtos antes de construir o seu próprio. Siga estes passos para instalá-lo:
1. No Unity Hub, crie um novo projeto Unity usando o modelo Universal 3D baseado no Universal Render Pipeline (URP).
2. Baixe e instale o projeto de exemplo Industry Product Configurator :
Para instalar o pacote, copie o URL do botão verde " Code" no repositório do GitHub e abra o Gerenciador de Pacotes do Unity.
- Clique no ícone de mais e selecione Adicionar pacote a partir de URL do Git , depois cole o link do repositório. O Unity fará o download e instalará todos os componentes necessários.
3. Após a conclusão do download, abra a cena de exemplo e execute-a para ver um configurador totalmente funcional em ação. O exemplo demonstra a troca de materiais, a alternância da visibilidade dos componentes e os controles da câmera, proporcionando uma visão imediata das possibilidades e do funcionamento do sistema. O pacote adiciona componentes específicos do configurador aos sistemas existentes do Unity para dar um impulso inicial ao seu protótipo.
4. Observação: Se você tiver problemas com a instalação do Git URL , consulte o guia de solução de problemas do Gerenciador de Pacotes .
✓ Ponto de verificação : Agora você deverá ver as opções do Configurador de Produto ao clicar com o botão direito do mouse na Hierarquia ou no menu GameObject. Há também boas instruções no repositório do GitHub para o exemplo do configurador, que ajudarão você a obter o máximo de aprendizado com ele.
O configurador de produtos abre no Editor.
Trazer um modelo 3D
Depois de explorar a amostra por algum tempo, o próximo passo é importar um modelo 3D ao qual você adicionará a funcionalidade de troca de materiais. Se você quiser concluir este tutorial mais rapidamente, pode usar o modelo Skidloader já incluído no exemplo (pesquise por Skidloader). Ou, você pode facilmente importar seu próprio modelo com uma das duas opções de conversão explicadas na próxima seção: A funcionalidade Otimizar e Converter dentro do Unity Asset Manager ou do Unity Asset Transformer Toolkit. Você também pode pular esta seção se quiser usar o modelo incluído no projeto de exemplo.
Asset Manager
Se você planeja criar configuradores profissionais, considere integrar o Asset Manager ao seu fluxo de trabalho. O Asset Manager da Unity é uma solução de gerenciamento de ativos digitais (DAM) baseada na nuvem que simplifica a maneira como as equipes podem carregar, gerenciar, transformar, compartilhar e acessar seus ativos 3D complexos em tempo real. O acesso ao Asset Manager está incluído na assinatura Unity Industry .
Você pode preparar e otimizar seus modelos 3D usando o Asset Manager, especificamente com o recurso Otimizar e Converter . Isso transforma seus ativos 3D , limpando as malhas, otimizando a contagem de polígonos e convertendo-os em formatos compatíveis com o Unity. Esse processo é concluído em menos de um minuto e melhora a eficiência do fluxo de trabalho para conversões de arquivos grandes.
Saiba mais sobre o Asset Manager aqui:
- Como usar o Unity Asset Manager
- Introdução aos métodos de transferência do Asset Manager .
Fluxo de trabalho CAD com o Asset Transformer Toolkit
Se você precisar converter modelos CAD complexos, considere usar o Unity Asset Transformer Toolkit , que lida com vários formatos de arquivo CAD e oferece recursos avançados de otimização. Importe modelos CAD diretamente para o Unity e, em seguida, use as ferramentas do Asset Transformer para reduzir a contagem de polígonos, simplificar materiais e preparar os modelos para visualização em tempo real.
Saiba mais sobre o plugin Asset Transformer aqui:
Prepare o cenário.
Comece criando uma nova cena para o seu configurador. Adicione a minicarregadeira à cena vazia ou, se estiver usando seu próprio modelo 3D , importe-o para a cena e posicione-o adequadamente. O modelo agora está pronto para você adicionar a funcionalidade de troca de materiais que você observou no projeto de exemplo.
✓ Ponto de verificação : Sua cena deve conter seu modelo 3D posicionado de forma que você possa vê-lo claramente na visualização da cena. O modelo deve ter materiais aplicados e estar visível na visualização do jogo.
Desenvolva a funcionalidade de troca de materiais.
Agora você implementará a funcionalidade principal do configurador – permitindo que os usuários troquem os materiais do seu produto em tempo real.
Criar variantes de material
1. Comece usando o componente integrado para conjuntos de variantes, selecionando-o no menu GameObject ou clicando com o botão direito do mouse na Hierarquia. Você terá diferentes opções, mas para este tutorial, vamos nos concentrar nas variantes de Material .
- O sistema de variantes de materiais do pacote utiliza um sistema de detecção que encontra automaticamente todos os renderizadores de malha que usam o material desejado em hierarquias de objetos complexas.
2. Defina o material base e o objeto pai usando a opção "Target Parent" (Objeto Pai de Destino) no componente e, em seguida, deixe a ferramenta "Capture" (Capturar) identificar todos os renderizadores de malha relevantes. Isso garante consistência entre produtos com múltiplos componentes, mantendo o desempenho.
Defina seu material base
3. Reutilize esses dois materiais com acabamentos metálicos, Tinta Metálica - Vermelha e Tinta Metálica - Azul (ou crie seus próprios equivalentes). Atribua os materiais a cada espaço de variante arrastando-os para os campos de variante. O sistema gerencia toda a lógica de comutação, atualizando automaticamente os materiais quando as variantes mudam. Use o controle deslizante de pré-visualização integrado no Inspector para testar variantes imediatamente e ver como os acabamentos em vermelho e azul ficam no seu modelo.
✓ Ponto de verificação : Agora você deverá ver duas variantes de material (Tinta Metálica - Vermelha e Tinta Metálica - Azul) no seu componente Conjunto de Variantes de Material . Ao arrastar o controle deslizante de pré-visualização no Inspector, seu modelo deverá alternar entre os acabamentos metálicos vermelho e azul em tempo real na visualização da Cena.
Para obter ajuda na criação de materiais, consulte a documentação de materiais da Unity.
Conecte variantes à interface do usuário
O pacote Product Configurator inclui um componente VariantSelect que gera menus suspensos com conjuntos de variantes existentes para um desenvolvimento rápido do configurador. Este recurso foi projetado para que usuários sem conhecimento de programação possam selecionar facilmente conjuntos de variantes na cena e se integra diretamente ao sistema de eventos do Unity, permitindo que você crie configuradores funcionais sem precisar de scripts personalizados. Isso é particularmente útil para usuários que utilizam a solução uGUI, permitindo que eles atribuam o componente diretamente ao evento OnClick .
Crie a interface do usuário.
Com as variantes de materiais funcionando, você precisa de uma interface que permita aos usuários controlar essas configurações e interagir com o configurador de produtos.
O Unity oferece dois sistemas de interface do usuário: um sistema de interface do usuário baseado em GameObjects (uGUI) e o mais recente UI Toolkit. Para este tutorial, usaremos o sistema uGUI baseado em GameObject, pois ele permite a integração do componente VariantSelect por meio de arrastar e soltar, sem a necessidade de escrever código.
1. Arraste e solte um botão do menu da interface do usuário na hierarquia e dê um nome a ele (por exemplo, "Botão de metal vermelho").
- Ao criar seu primeiro elemento de interface do usuário, o Unity criará automaticamente objetos Canvas e EventSystem em sua cena. O Canvas funciona como um contêiner para todos os elementos da interface do usuário, enquanto o EventSystem lida com a entrada do usuário, como cliques em botões.
- Certifique-se de que o componente Canvas esteja configurado para "Ajustar à escala com o tamanho da tela" . Essa configuração permite que os elementos da interface do usuário mantenham proporções consistentes em diferentes resoluções de tela. Defina a resolução de referência para corresponder às dimensões da tela desejada – neste exemplo, poderia ser 1920x1080 . Isso define a resolução base na qual o layout da sua interface de usuário se baseia. Além disso, defina a propriedade Match para 0,5 , o que encontra um equilíbrio entre o dimensionamento de largura e altura, garantindo que seus elementos de interface do usuário sejam dimensionados uniformemente, independentemente de a tela ser mais larga ou mais alta que a referência. Dica de ancoragem de interface do usuário: Para manter os botões ancorados em bordas específicas da tela (superior/inferior), selecione o elemento da interface do usuário e clique na predefinição de ancoragem desejada no painel Predefinições de Ancoragem do componente Transformação Retangular. Saiba mais no Guia de Ancoragem da Unity UI.
2. Para conectar seu botão à seleção de variantes, selecione o botão na Hierarquia, encontre o componente Button no Inspector e procure pela seção OnClick() .
3. Clique em " + " para adicionar um novo evento, arraste seu GameObject com o componente VariantSelect para o campo de objeto, escolha VariantSelect no menu suspenso e selecione SelectVariant para acionar a mudança de material quando o botão for clicado.
4. Crie botões adicionais para cada acabamento de material (Botão de Metal Azul) e conecte-os da mesma maneira. Se você quiser aprender mais sobre os fundamentos da uGUI, visite este tutorial para dominar o básico .
✓ Ponto de verificação : Clique no modo Play e, em seguida, clique no botão Red Metal. Seu modelo deverá mudar para um acabamento vermelho metálico. Clique no botão Metal Azul para mudar a cor para azul. Você deverá ver um Canvas e um EventSystem na sua Hierarquia, e seus botões deverão estar visíveis na visualização do Jogo.
Se os botões não estiverem funcionando, verifique se seus eventos OnClick estão conectados corretamente e consulte a documentação de botões do Unity.
Para usuários avançados: Se você se sente confortável com programação, este vídeo a partir de 20:10 mostra como gerar botões de interface do usuário automaticamente usando o script VariantSetController , que cria botões dinamicamente com nomes e funcionalidades corretos.
Adicionar controles de câmera
Uma interface de configuração completa também deve dar aos usuários controle sobre como visualizam o produto, permitindo-lhes explorar diferentes ângulos e perspectivas.
Para proporcionar a melhor experiência de usuário ao seu configurador, você pode usar o pacote Cinemachine , que oferece uma solução sem código para configurar visualizações de câmera profissionais. O projeto de exemplo do configurador já inclui uma configuração do Cinemachine , para que você possa começar imediatamente a adicionar suas próprias câmeras.
1. Para criar um novo ângulo de câmera para o seu produto, acesse GameObject > Cinemachine > Camera para adicionar uma nova câmera virtual à sua cena. Posicione esta câmera para mostrar seu produto do ângulo desejado, por exemplo, uma visão em close-up que destaque as alterações no material.
- Dica: Use a opção Alinhar com a Vista (Ctrl+Shift+F no Windows ou Cmd+Shift-F no Mac) como ponto de partida. Isso move a sua câmera para a mesma posição que a sua visualização de cena. Dessa posição, é mais fácil encontrar o ângulo desejado.
2. No componente Câmera Cinemachine , defina o valor de Prioridade para determinar quando esta câmera deve estar ativa (números mais altos têm prioridade). Use o botão Solo no componente de câmera Cinemachine para testar suas diferentes visualizações de câmera.
3. Adicione duas ou três câmeras para obter diferentes ângulos de visão. O componente Cinemachine Brain (adicionado automaticamente à sua câmera principal) controla as transições entre as diferentes câmeras, sempre utilizando a câmera virtual com a maior prioridade. Veja este vídeo para saber mais sobre como usar o Cinemachine no Unity 6.
4. Conectando câmeras aos controles da interface do usuário: Para ativar diferentes visualizações de câmera, crie botões de interface do usuário (copie e cole os botões da sua variante de material e renomeie-os para as câmeras). Para o evento OnClick, arraste a câmera que deseja controlar e use a opção Priorizar . Isso definirá a prioridade como Máxima e, portanto, essa câmera virtual será a câmera ativa.
5. Configurando o controle interativo da câmera: Para movimentação interativa da câmera, utilize uma câmera FreeLook , que permite o movimento orbital ao redor do produto controlado pelo mouse.
6. Configurando ações de entrada: No componente Controlador de Eixos de Entrada do Cinemachine , você verá a seção Eixos Acionados com as opções Órbita de Visão X , Órbita de Visão Y e Escala da Órbita . Essas configurações devem ser feitas com as ações de entrada Player/Look do pacote Product Configurator. Para encontrar essas ações, navegue até:
Ativos/Amostras/Configurador de Produtos/1.6.0/Configuração Padrão/Ação de IU Padrão
Arraste a ação Player/Look desta pasta para os campos de entrada Look Orbit X e Look Orbit Y na seção Driven Axes . Isso habilita o controle da câmera pelo mouse somente quando o botão direito do mouse for clicado.
Agora você está pronto para testar seu configurador com vários ângulos de câmera que os usuários podem controlar através da interface.
retoques finais e publicação na web
Com o configurador interativo concluído, a etapa final é prepará-lo para implantação na web, para que os usuários possam acessá-lo por meio de seus navegadores.
Compile para WebGL com perfis de compilação.
Para implementar seu configurador em WebGL, use a opção Web como plataforma. Acesse Arquivo > Criar Perfis e selecione Web como sua plataforma de destino no lado esquerdo da janela. Certifique-se de que sua cena esteja presente na lista de cenas e exclua quaisquer outras cenas que você não queira criar.
Para implementar seu configurador em WebGL, use a opção Web como plataforma.
Se você vir a mensagem " Nenhum módulo Web carregado" com um botão " Instalar com o Unity Hub" , será necessário instalar o módulo de suporte à compilação WebGL . Clique no botão Instalar e o Unity Hub fará o download e instalará o módulo de suporte à compilação WebGL. Você precisará reiniciar o Editor para carregar o novo módulo.
Após instalar o módulo de suporte à compilação WebGL, configure as opções de compilação, incluindo opções de compressão de textura, níveis de otimização de código e restrições de memória adequadas para a implantação no navegador.
Após mudar para a plataforma WebGL, revise as Configurações do Player para otimização específica da web. Acesse Editar > Configurações do Projeto > Player e selecione a aba Web . Na seção Configurações de Publicação , você pode definir o Formato de Compressão para Brotli (recomendado para arquivos menores). Consulte a documentação de configurações do Web Player da Unity para obter orientações detalhadas sobre como otimizar essas configurações.
Quando tudo estiver pronto, clique em Construir e Executar . O Unity irá gerar uma pasta com tudo o que é necessário para executar o seu configurador em um navegador da web. O navegador será aberto automaticamente e você deverá ver sua compilação sendo executada sem problemas. Se você clicar apenas em "Compilar" , precisará hospedar o resultado em um servidor web local ou remoto. A Unity também oferece uma opção de hospedagem através do Unity Play . Se você estiver usando o Unity 6.1 ou superior, o Unity oferece uma opção para publicar diretamente no Unity Play a partir das Configurações de Compilação WebGL.
Você deverá ver agora uma janela do navegador aberta e seu aplicativo em funcionamento.
Teste e publique online
Teste seu configurador em diferentes navegadores e dispositivos para garantir um desempenho consistente. Os componentes do pacote funcionam bem em compilações WebGL, mas considere o desempenho da troca de variantes nos dispositivos de destino e ajuste a complexidade de acordo.
O Unity cria uma pasta de compilação completa contendo um arquivo index.html, dados de jogo compactados e todos os recursos necessários. Esta pasta pode ser hospedada em qualquer servidor web padrão, tornando seu configurador acessível por meio de qualquer navegador web moderno.
✓ Sucesso final : Agora você tem um configurador de produtos funcionando. Sua pasta de compilação deve conter um arquivo index.html que, quando aberto em um navegador (ou hospedado em um servidor web), exibe seu modelo 3D com botões interativos de Metal Vermelho e Metal Azul que alteram o acabamento do seu modelo em tempo real.
Opcional: Crie um ambiente industrial realista.
Para uma apresentação profissional aprimorada, considere adicionar um dos pacotes de ambiente da Asset Store da Unity. A Unity oferece ambientes industriais oficiais, como o Unity Factory e o Unity Warehouse , ou você pode procurar configurações de estúdio limpas com perfis de iluminação e pós-processamento pré-configurados. Esses pacotes fornecem a base para a visualização realista do produto sem exigir a criação de um ambiente complexo. Além disso, o Unity Hub inclui o modelo de cena de exemplo URP 3D , que demonstra configurações otimizadas de iluminação e renderização.
Opcional: Interface de usuário avançada com o kit de ferramentas de interface do usuário.
Para desenvolvimento de interfaces de usuário mais avançadas, a Unity oferece o UI Toolkit , que se inspira em práticas de desenvolvimento web, usando estruturas semelhantes a CSS e XML (no UI Toolkit, os equivalentes são chamados de USS e UXML). Criar a interface do seu configurador usando o UI Toolkit requer alguma programação em C# para definir e programar a funcionalidade dos botões. Isso ocorre porque o UI Toolkit não oferece uma maneira pronta para uso de conectar cliques de botão com funcionalidades. A interface do usuário do projeto de exemplo foi construída com o Unity UI Toolkit, oferecendo informações valiosas sobre sua implementação.
Abaixo, você pode ver um pequeno trecho de código mostrando como fazer com que um botão específico (chamado "alterar") execute uma ação definida a partir do componente de seleção de variantes:
using IndustryCSE.Tool.ProductConfigurator.Runtime;
using UnityEngine;
using UnityEngine.UIElements;
public class SimpleUIController : MonoBehaviour
{
[SerializeField]
private VariantSelect variantSelect; // Reference to the VariantSelect instance
[SerializeField]
private UIDocument uiDocument; // Reference to the UI Document
private void Start()
{
if (variantSelect == null || uiDocument == null) return;
// Get the root visual element
var root = uiDocument.rootVisualElement;
// Query the button named "change"
var changeButton = root.Q<Button>("change");
if (changeButton != null)
{
// Add a callback to the button
changeButton.clicked += () =>
{
variantSelect.SelectVariant(); // Trigger the variant selection
};
}
}
}
Para aprender como adicionar um botão à sua interface de usuário usando o UI Toolkit, consulte este tutorial no Unity Learn .
Opcional: Funcionalidade de variantes avançadas
Além da simples troca de materiais, o pacote oferece suporte a animações e variantes de transformação para demonstrações dinâmicas. Use-os para produtos com partes móveis, componentes ajustáveis ou recursos que se beneficiam de apresentações animadas. As variantes de transformação lidam com modificações de posição, rotação e escala, enquanto as variantes de animação demonstram a funcionalidade ou fornecem transições envolventes. Esses recursos avançados são ótimos quando você deseja demonstrar a funcionalidade do produto ou criar experiências de configuração mais envolventes.
Além da simples troca de materiais, você também pode usar animações e variantes de transformação para demonstrações dinâmicas.
Agora você possui o conhecimento básico para criar um configurador com o pacote Industry Product Configurator da Unity. Seja para produtos de consumo, equipamentos industriais ou visualização arquitetônica, esta base fornece tudo o que é necessário para criar configuradores atraentes que impulsionem resultados de negócios.
