Construa um configurador de produto simples no Unity em uma hora ou menos
Um configurador de produtos pode transformar a forma como os clientes interagem com seus produtos, movendo a experiência além de olhar para imagens estáticas, para uma que é interativa, proporcionando ao espectador detalhes mais ricos e mais informações.
Em aplicações industriais, os configuradores podem mostrar equipamentos complexos, permitir personalização em tempo real e ajudar os clientes a visualizar produtos em seus contextos específicos.
Neste tutorial, você construirá seu primeiro configurador de produtos implantável na web em uma hora ou menos. Seu configurador permitirá que os usuários mudem diferentes materiais em um modelo 3D usando uma interface simples. Ao final, você terá uma compreensão das características fundamentais para criar configuradores de produtos profissionais.
Se você preferir seguir este tutorial com um vídeo, pode assisti-lo aqui.
Nota: Não perca nosso webinar sobre o Modelo de Configurador de Produtos que acontecerá em 15 de julho!
Pré-requisitos
Este tutorial é voltado para desenvolvedores que têm conhecimento de iniciante a intermediário em desenvolvimento de projetos no Unity. Para completar o tutorial, você precisará de
1. Instale o seguinte:
- Unity 6 com suporte para compilação WebGL
- Uma licença de teste ou licença regular para Unity Industry
- O pacote de Configurador de Produtos da Unity Industry, disponível no GitHub
2. Adicione um modelo 3D: Use seu próprio arquivo de modelo 3D ou o incluído no template.
3. Adicione materiais básicos: Tenha em mãos pelo menos 2-3 materiais diferentes ou reutilize os materiais metálicos já incluídos no tutorial.
Tempo estimado para completar: 30-60 minutos
Explore o projeto de amostra
Este tutorial usa o projeto de amostra Industry Product Configurator da Unity como base de aprendizado e ponto de partida. A amostra demonstra um configurador completo em funcionamento com troca de materiais e componentes, controles de câmera e interface do usuário – exatamente os recursos que você aprenderá a implementar no exercício.
A amostra inclui componentes prontos para visibilidade, e variantes de material, animação e transformação, para que você possa se concentrar no seu produto em vez de construir sistemas de variantes do zero.
Abra o projeto de amostra e crie sua própria cena
Ao explorar primeiro o projeto de amostra, você terá experiência prática com um configurador de produtos antes de construir o seu próprio. Siga estas etapas para instalá-lo:
1. No Unity Hub, crie um novo projeto Unity usando o template Universal 3D baseado no Universal Render Pipeline (URP).
2. Baixe e instale o Industry Product Configurator sample project:
- Para instalar o pacote, copie a 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 Add package from git URL, em seguida, cole o link do repositório. A Unity fará o download e instalará todos os componentes necessários.
3. Uma vez que o download seja concluído, abra a cena de amostra e execute-a para ver um configurador totalmente funcional em ação. A amostra demonstra a troca de materiais, alternâncias de visibilidade de componentes e controles de câmera, dando a você uma visão imediata do que é possível e como o sistema funciona. O pacote adiciona componentes específicos do configurador aos sistemas existentes da Unity para acelerar seu protótipo.
4. Observação: Se você tiver problemas com a instalação da URL do Git, verifique o guia de solução de problemas do Gerenciador de Pacotes.
✓ Ponto de verificação: Agora você deve ver opções de Product Configurator quando clicar com o botão direito na Hierarquia ou no menu GameObject. Há também boas instruções no repositório do GitHub para o projeto de amostra do configurador que o ajudarão a obter o máximo de aprendizado.
O configurador de produtos abre no Editor
Traga um modelo 3D
Depois de passar algum tempo explorando o exemplo, o próximo passo é trazer um modelo 3D ao qual você adicionará a funcionalidade de troca de material. Se você quiser completar este tutorial mais rápido, pode usar o modelo Skidloader já incluído no exemplo (procure por Skidloader). Ou, você pode facilmente trazer seu próprio modelo com uma das duas opções de conversão explicadas na próxima seção: O recurso 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 construir 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 em nuvem que simplifica como as equipes podem fazer upload, gerenciar, transformar, compartilhar e acessar seus complexos ativos 3D em tempo real. O acesso ao Asset Manager está incluído em uma assinatura Unity Industry.
Você pode preparar e otimizar seus modelos 3D usando o Asset Manager, especificamente com seu recurso Otimizar e Converter. Isso transforma seus ativos 3D limpando malhas, otimizando contagens de polígonos e convertendo-os em formatos prontos para 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 Asset Transformer Toolkit da Unity, que lida com vários formatos de arquivo CAD e fornece recursos avançados de otimização. Importe modelos CAD diretamente para o Unity, depois use as ferramentas do Asset Transformer para reduzir contagens de polígonos, simplificar materiais e preparar modelos para visualização em tempo real.
Saiba mais sobre o Plugin Asset Transformer aqui:
Configure sua cena
Comece criando uma nova cena para seu configurador. Adicione o Skidloader à 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 material que você observou no projeto de exemplo.
✓ Ponto de verificação: Sua cena deve conter seu modelo 3D posicionado onde você pode vê-lo claramente na visualização da Cena. O modelo deve ter materiais aplicados e ser visível na visualização do Jogo.
Construa a funcionalidade de troca de material
Agora você implementará o recurso principal do configurador – permitindo que os usuários troquem materiais em seu produto em tempo real.
Criar variantes de material
1. Comece usando o componente embutido para conjuntos de variantes, escolhendo-o no menu GameObject ou clicando com o botão direito na Hierarquia. Você terá diferentes opções, mas para este tutorial, vamos nos concentrar nas Variantes de Material.
- O sistema de variantes de material do pacote usa um sistema de detecção que encontra automaticamente todos os renderizadores de malha que usam seu material alvo em hierarquias de objetos complexas.
2. Defina seu material base e objeto pai usando a opção Target Parent no componente, e então deixe a ferramenta Captura 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. Reuse esses dois materiais com acabamentos metálicos, Pintura Metálica - Vermelha e Pintura Metálica - Azul (ou crie seus próprios equivalentes). Atribua os materiais a cada slot de Variante arrastando-os para os campos de Variante. O sistema lida com toda a lógica de troca, atualizando automaticamente os materiais quando as variantes mudam. Use o controle deslizante de visualização embutido no Inspetor para testar variantes imediatamente e ver como seus acabamentos vermelho e azul ficam em seu modelo.
✓ Ponto de verificação: Agora você deve ver duas Variantes de Material (Pintura Metálica - Vermelha e Pintura Metálica - Azul) em seu componente Conjunto de Variantes de Material. Quando você arrasta o controle deslizante de visualização no Inspetor, seu modelo deve mudar entre os acabamentos metálicos vermelho e azul em tempo real na visualização da Cena.
Para 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 de conjuntos de variantes existentes para desenvolvimento rápido de configuradores. Esse recurso é projetado para não desenvolvedores escolherem facilmente conjuntos de variantes na cena e se integra diretamente ao sistema de eventos da Unity, permitindo que você construa configuradores funcionais sem script personalizado. Isso é particularmente útil para usuários que utilizam a solução uGUI, permitindo que eles atribuam diretamente o componente ao evento OnClick.
Crie a interface do usuário
Com suas variantes de material funcionando, você precisa de uma interface que permita aos usuários controlar essas configurações e interagir com seu configurador de produtos.
A Unity oferece dois sistemas de UI: um sistema de UI baseado em GameObject (uGUI) e o novo UI Toolkit. Para este tutorial, usaremos o sistema uGUI baseado em GameObject, pois permite integração de arrastar e soltar com o componente VariantSelect sem exigir código.
1. Arraste e solte um botão do menu de UI na Hierarquia e nomeie-o (por exemplo, "Botão Metal Vermelho").
- Quando você cria seu primeiro elemento de UI, a Unity criará automaticamente objetos Canvas e EventSystem em sua cena. O Canvas atua como o contêiner para todos os elementos de UI, enquanto o EventSystem lida com a entrada do usuário, como cliques em botões.
- Certifique-se de que o componente Canvas esteja definido como Escalar com o Tamanho da Tela. Essa configuração permite que os elementos de UI mantenham proporções consistentes em diferentes resoluções de tela. Defina a Resolução de Referência para corresponder às dimensões da tela alvo – neste exemplo, pode ser 1920x1080. Isso define a resolução base na qual seu layout de UI é baseado. Além disso, defina a propriedade Match para 0.5, que equilibra a escala de largura e altura, garantindo que seus elementos de UI escalem uniformemente, independentemente de a tela ser mais larga ou mais alta que a referência.Dica de ancoragem de UI: Para manter os botões ancorados a bordas específicas da tela (superior/inferior), selecione seu elemento de UI e clique na predefinição de âncora desejada no painel Predefinições de Âncora do componente Rect Transform. Saiba mais no Guia de Ancoragem da Unity UI
2. Para conectar seu botão à seleção de variante, selecione seu botão na Hierarquia, encontre o componente Botão no Inspetor e procure a 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 forma. Se você quiser aprender mais sobre os fundamentos do uGUI, visite este tutorial para dominar o básico.
✓ Ponto de verificação: Clique no modo Play, em seguida, clique no botão de Metal Vermelho e seu modelo deve mudar para um acabamento metálico vermelho. Clique no botão de Metal Azul para mudá-lo para azul. Você deve ver um Canvas e um EventSystem na sua Hierarquia, e seus botões devem ser visíveis na visualização do Jogo.
Se os botões não estiverem funcionando, verifique se seus eventos OnClick estão devidamente conectados e consulte a documentação do Botão da Unity.
Para usuários avançados: Se você se sentir confortável com a programação, este vídeo a partir do minuto 20:10 mostra como gerar automaticamente botões de UI usando o script VariantSetController, que cria botões dinamicamente com nomes e funcionalidades corretas.
Adicionar controles de câmera
Uma interface de configurador completa também deve dar aos usuários controle sobre como visualizam o produto, permitindo que explorem diferentes ângulos e perspectivas.
Para proporcionar a melhor experiência ao usuário no seu configurador, você pode usar o pacote Cinemachine, que fornece uma solução sem código para configurar visualizações de câmera profissionais. O projeto de amostra do configurador já inclui uma configuração do Cinemachine, para que você possa começar a adicionar suas próprias câmeras imediatamente.
1. Para criar um novo ângulo de câmera para seu produto, vá para GameObject > Cinemachine > Câmera 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 de close que destaca as mudanças de material.
- Dica: Use Alinhar com a Visão (Ctrl-Shift-F no Windows ou Cmd-Shift-F no Mac) como ponto de partida. Isso move sua câmera para a mesma posição da sua visualização de Cena. A partir dessa posição, é mais fácil encontrar o ângulo desejado.
2. No componente da 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 da câmera Cinemachine para testar suas diferentes visualizações de câmera.
3. Adicione duas a três câmeras para 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 levando em conta a câmera virtual com a maior prioridade. Veja este vídeo para aprender mais sobre como usar o Cinemachine no Unity 6.
4. Conectando câmeras a controles de UI: Para ativar diferentes visualizações de câmera, crie botões de UI (copie e cole dos botões de variante de material e renomeie-os para câmeras). Para o evento OnClick, arraste a câmera que você deseja controlar e use a opção Priorizar. Isso definirá a prioridade como a mais alta e, portanto, esta câmera virtual será a câmera ativa.
5. Configurando controle de câmera interativo: Para movimento de câmera interativo, use uma câmera FreeLook que permite movimento de órbita controlado pelo mouse ao redor do seu produto.
6. Configurando ações de entrada: No componente Controlador de Eixo de Entrada Cinemachine, você verá a seção Eixos Controlados com opções Look Orbit X, Look Orbit Y e Orbit Scale. Esses devem ser configurados com ações de entrada Player/Look do pacote Product Configurator. Para encontrar essas ações, navegue até:
Assets/Samples/Product Configurator/1.6.0/Standard Configuration Setup/StandardUIAction
Arraste a ação Player/Look desta pasta para os campos de entrada para Look Orbit X e Look Orbit Y na seção Eixos Controlados. Isso habilita a câmera controlada pelo mouse apenas quando o botão direito do mouse é clicado.
Agora você está pronto para testar seu configurador com múltiplos ângulos de câmera que os usuários podem controlar através da interface.
Toques finais e implantação na web
Com seu configurador interativo completo, o passo final é prepará-lo para implantação na web para que os usuários possam acessá-lo de seus navegadores.
Construa para WebGL com Perfis de Construção
Para implantar seu configurador no WebGL, use a opção Web como a plataforma. Navegue até Arquivo > Perfis de Construção 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 deseja construir.
Para implantar seu configurador no WebGL, use a opção Web como a plataforma.
Se você ver a mensagem Nenhum módulo Web carregado com um botão Instalar com Unity Hub, você precisará instalar o módulo Suporte para Construção WebGL. Clique no botão de instalar e o Unity Hub fará o download e instalará o módulo de Suporte para Construção WebGL. Você precisará reiniciar o Editor para carregar o novo módulo.
Uma vez que o módulo de Suporte para Construção WebGL esteja instalado, configure as configurações de construçã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 implantação no navegador.
Após mudar para a plataforma WebGL, revise as Configurações do Player para otimização específica da web. Vá para 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 tamanhos de arquivo menores). Veja a documentação de configurações do Web Player da Unity para orientações detalhadas sobre como otimizar essas configurações
Uma vez que tudo esteja pronto, clique em Construir e Executar. A Unity gerará uma pasta com tudo o que é necessário para lançar seu configurador em um navegador da web. O navegador será aberto automaticamente e você deverá ver sua construção funcionando suavemente. Se você clicar apenas em Construir, precisará hospedar a saída em um servidor web local ou remoto. A Unity também oferece uma opção de hospedagem através do Unity Play.
Agora você deve ver uma janela do navegador abrir e seu aplicativo está ao vivo.
Teste e publique online
Teste seu configurador em diferentes navegadores e dispositivos para garantir um desempenho consistente. Os componentes do pacote funcionam bem em builds WebGL, mas considere como a troca de variantes se comporta em dispositivos-alvo e ajuste a complexidade de acordo.
A Unity cria uma pasta de build completa contendo um arquivo index.html, dados do jogo compactados e todos os ativos necessários. Esta pasta pode ser hospedada em qualquer servidor web padrão, tornando seu configurador acessível através de qualquer navegador web moderno.
✓ Sucesso Final: Agora você tem um configurador de produtos funcional. Sua pasta de build 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 mudam 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 fornece ambientes industriais oficiais como Unity Factory e Unity Warehouse, ou procure por configurações de estúdio limpas com iluminação pré-configurada e perfis de pós-processamento. Esses pacotes fornecem a base para visualização realista de produtos sem exigir a criação extensa de ambientes. Além disso, o Unity Hub inclui o template URP 3D Sample Scene que demonstra configurações de iluminação e renderização otimizadas.
Opcional: UI Avançada com UI Toolkit
Para um desenvolvimento de UI mais avançado, a Unity oferece UI Toolkit, que se baseia em práticas de desenvolvimento web, usando estruturas semelhantes ao CSS e XML (no UI Toolkit, os equivalentes são chamados de USS e UXML). Construir a interface do seu configurador usando o UI Toolkit requer um pouco de codificação em C# para definir e temporizar a funcionalidade dos botões. Isso ocorre porque o UI Toolkit não oferece uma maneira pronta de conectar cliques de botões com funcionalidades. A interface do usuário do projeto de amostra é construída com o Unity UI Toolkit, oferecendo insights valiosos sobre sua implementação.
Abaixo você pode ver um pequeno trecho de código mostrando como fazer um botão específico (chamado mudar) realizar uma ação definida a partir do componente de seleção de variante:
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 usando o UI Toolkit, veja este tutorial no Unity Learn.
Opcional: Funcionalidade avançada de variante
Além da troca básica de materiais, o pacote suporta variantes de animação e transformação para demonstrações dinâmicas. Use esses para produtos com partes móveis, componentes ajustáveis ou recursos que se beneficiam de mostras animadas. As variantes de transformação lidam com modificações de posição, rotação e escala, enquanto as variantes de animação demonstram funcionalidade ou fornecem transições envolventes. Esses recursos avançados funcionam muito bem quando você deseja mostrar a funcionalidade do produto ou criar experiências de configurador mais envolventes.
Além da troca básica de materiais, você também pode usar variantes de animação e transformação para demonstrações dinâmicas.
Agora você tem o conhecimento básico de como construir um configurador com o pacote Unity's Industry Product Configurator. Seja construindo para equipamentos industriais, produtos de consumo ou visualização arquitetônica, esta base fornece tudo o que é necessário para criar configuradores atraentes que geram resultados comerciais.
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
