Construir un configurador de productos simple en Unity en una hora o menos
Un configurador de productos puede transformar la forma en que los clientes interactúan con sus productos, llevando la experiencia más allá de mirar imágenes estáticas, a una que es interactiva, proporcionando al espectador detalles más ricos y más información.
En aplicaciones industriales, los configuradores pueden mostrar equipos complejos, permitir personalización en tiempo real y ayudar a los clientes a visualizar productos en sus contextos específicos.
En este tutorial, construirás tu primer configurador de productos desplegable en la web en una hora o menos. Tu configurador permitirá a los usuarios cambiar diferentes materiales en un modelo 3D utilizando una interfaz simple. Al final, tendrás una comprensión de las características fundamentales para crear configuradores de productos profesionales.
Si prefieres seguir este tutorial con un video, puedes verlo aquí.
Nota: ¡No te pierdas nuestro seminario web sobre el Plantilla de Configurador de Productos que se llevará a cabo el 15 de julio!
Requisitos previos
Este tutorial está dirigido a desarrolladores que tienen conocimientos de principiante a intermedio en el desarrollo de proyectos en Unity. Para completar el tutorial, necesitarás
1. Instalar lo siguiente:
- Unity 6 con soporte de compilación WebGL
- Una prueba o licencia regular para Unity Industry
- El paquete de Configurador de Productos de la Industria de Unity, disponible en GitHub
2. Añadir un modelo 3D: Usa tu propio archivo de modelo 3D o el que se incluye en la plantilla.
3. Añadir materiales básicos: Ten a mano al menos 2-3 materiales diferentes o reutiliza los materiales metálicos ya incluidos en el tutorial.
Tiempo estimado para completar: 30-60 minutos
Explora el proyecto de muestra
Este tutorial utiliza el proyecto de muestra Configurador de Productos de la Industria de Unity como base de aprendizaje y punto de partida. La muestra demuestra un configurador completamente funcional con cambio de materiales y componentes, controles de cámara e interfaz de usuario, exactamente las características que aprenderás a implementar en el ejercicio.
La muestra incluye componentes listos para la visibilidad, y variantes de material, animación y transformación, para que puedas concentrarte en tu producto en lugar de construir sistemas de variantes desde cero.
Abre el proyecto de muestra y crea tu propia escena
Al explorar primero el proyecto de muestra, obtendrás experiencia práctica con un configurador de productos antes de construir el tuyo. Sigue estos pasos para instalarlo:
1. En el Unity Hub, crea un nuevo proyecto de Unity utilizando la plantilla Universal 3D basada en el Pipeline de Renderizado Universal (URP).
2. Descarga e instala el proyecto de muestra del Configurador de Productos de la Industria:
- Para instalar el paquete, copia la URL del botón verde Código en el repositorio de GitHub y abre el Administrador de Paquetes de Unity.
- Haz clic en el icono de más y selecciona Añadir paquete desde URL de git, luego pega el enlace del repositorio. Unity descargará e instalará todos los componentes necesarios.
3. Una vez que se complete la descarga, abre la escena de muestra y ejecútala para ver un configurador completamente funcional en acción. La muestra demuestra el cambio de materiales, los interruptores de visibilidad de componentes y los controles de cámara, dándote una visión inmediata de lo que es posible y cómo funciona el sistema. El paquete añade componentes específicos del configurador a los sistemas existentes de Unity para acelerar tu prototipo.
4. Nota: Si tienes problemas con la instalación de la URL de Git, consulta la guía de solución de problemas del Administrador de Paquetes.
✓ Punto de control: Ahora deberías ver opciones de Product Configurator cuando haces clic derecho en la Jerarquía o en el menú GameObject. También hay buenas instrucciones en el repositorio de GitHub para el ejemplo del configurador que te ayudarán a obtener el máximo aprendizaje de él.
El configurador de productos se abre en el Editor
Importa un modelo 3D
Una vez que hayas pasado un tiempo explorando el ejemplo, el siguiente paso es importar un modelo 3D al que agregarás funcionalidad de cambio de material. Si deseas completar este tutorial más rápido, puedes usar el modelo Skidloader ya incluido en el ejemplo (busca Skidloader). O, puedes traer fácilmente tu propio modelo con una de las dos opciones de conversión explicadas en la siguiente sección: La Optimize and Convert feature dentro de Unity Asset Manager o el Unity Asset Transformer Toolkit. También puedes omitir esta sección si deseas usar el modelo incluido en el proyecto de ejemplo.
Asset Manager
Si planeas construir configuradores profesionales, considera integrar Asset Manager en tu flujo de trabajo. El Asset Manager de Unity es una solución de gestión de activos digitales (DAM) basada en la nube que optimiza cómo los equipos pueden cargar, gestionar, transformar, compartir y acceder a sus complejos activos 3D en tiempo real. El acceso a Asset Manager está incluido en una Unity Industry subscription.
Puedes preparar y optimizar tus modelos 3D usando Asset Manager, específicamente con su Optimize and Convert feature. Esto transforma tus activos 3D limpiando mallas, optimizando recuentos de polígonos y convirtiéndolos en formatos listos para Unity. Este proceso se completa en menos de un minuto y mejora la eficiencia del flujo de trabajo para conversiones de archivos grandes.
Aprende más sobre Asset Manager aquí:
- How to use Unity Asset Manager
- Introduction to Asset Manager transfer methods.
CAD workflow with Asset Transformer Toolkit
Si necesitas convertir modelos CAD complejos, considera usar el Kit de herramientas de transformación de activos de Unity, que maneja varios formatos de archivos CAD y proporciona características avanzadas de optimización. Importa modelos CAD directamente en Unity, luego usa las herramientas del Transformador de Activos para reducir el conteo de polígonos, simplificar materiales y preparar modelos para visualización en tiempo real.
Aprende más sobre el Plugin de Transformador de Activos aquí:
- Documentación del Kit de herramientas de transformación de activos
Configura tu escena
Comienza creando una nueva escena para tu configurador. Agrega el Skidloader a la escena vacía, o si estás usando tu propio modelo 3D, impórtalo en la escena y colócalo adecuadamente. El modelo ahora está listo para que agregues la funcionalidad de cambio de material que observaste en el proyecto de muestra.
✓ Punto de control: Tu escena debe contener tu modelo 3D posicionado donde puedas verlo claramente en la vista de escena. El modelo debe tener materiales aplicados y ser visible en la vista de juego.
Construye la funcionalidad de cambio de material
Ahora implementarás la característica principal del configurador: permitir a los usuarios cambiar materiales en tu producto en tiempo real.
Crea variantes de material
1. Comienza usando el componente integrado para conjuntos de variantes eligiéndolo del menú GameObject o haciendo clic derecho en la jerarquía. Tendrás diferentes opciones, pero para este tutorial, nos centraremos en las variantes de material.
- El sistema de variantes de material del paquete utiliza un sistema de detección que encuentra automáticamente todos los renderizadores de malla que utilizan tu material objetivo a través de jerarquías de objetos complejas.
2. Define tu material base y objeto padre usando la opción de Padre Objetivo en el componente, luego deja que la herramienta Captura identifique todos los renderizadores de malla relevantes. Esto asegura consistencia entre productos con múltiples componentes mientras mantiene el rendimiento.
Define tu material base
3. Reutiliza estos dos materiales con acabados metálicos, Pintura Metálica - Roja y Pintura Metálica - Azul (o crea tus propios equivalentes). Asigna los materiales a cada ranura de Variante arrastrándolos a los campos de Variante. El sistema maneja toda la lógica de conmutación, actualizando automáticamente los materiales cuando cambian las variantes. Utiliza el control deslizante de vista previa incorporado en el Inspector para probar variantes de inmediato y ver cómo lucen tus acabados rojos y azules en tu modelo.
✓ Punto de control: Ahora deberías ver dos Variantes de Material (Pintura Metálica - Roja y Pintura Metálica - Azul) en tu componente Conjunto de Variantes de Material. Cuando arrastres el control deslizante de vista previa en el Inspector, tu modelo debería cambiar entre los acabados metálicos rojos y azules en tiempo real en la vista de Escena.
Para ayuda en la creación de materiales, consulta la documentación de materiales de Unity.
Conectar variantes a la interfaz de usuario
El paquete Product Configurator incluye un componente VariantSelect que genera menús desplegables de conjuntos de variantes existentes para un desarrollo rápido del configurador. Esta función está diseñada para que los no desarrolladores puedan elegir fácilmente conjuntos de variantes en la escena e integra directamente con el sistema de eventos de Unity, permitiéndote construir configuradores funcionales sin scripting personalizado. Esto es particularmente útil para los usuarios que utilizan la solución uGUI, permitiéndoles asignar directamente el componente al evento OnClick.
Crea la interfaz de usuario
Con tus variantes de material funcionando, necesitas una interfaz que permita a los usuarios controlar estas configuraciones e interactuar con tu configurador de productos.
Unity ofrece dos sistemas de UI: un sistema de UI basado en GameObject (uGUI) y el nuevo UI Toolkit. Para este tutorial, utilizaremos el sistema uGUI basado en GameObject ya que permite la integración de arrastrar y soltar con el componente VariantSelect sin requerir ningún código.
1. Arrastra y suelta un botón del menú de UI en la Jerarquía y nómbralo (por ejemplo, "Botón de Metal Rojo").
- Cuando creas tu primer elemento de UI, Unity creará automáticamente objetos Canvas y EventSystem en tu escena. El Canvas actúa como el contenedor para todos los elementos de UI, mientras que el EventSystem maneja la entrada del usuario como clics de botón.
- Asegúrate de que el componente Canvas esté configurado en Escalar con el tamaño de la pantalla. Esta configuración permite que los elementos de UI mantengan proporciones consistentes en diferentes resoluciones de pantalla. Establezca la Resolución de Referencia para que coincida con las dimensiones de su pantalla objetivo; en este ejemplo podría ser 1920x1080. Esto define la resolución base en la que se basa el diseño de su interfaz de usuario. Además, establezca la propiedad Coincidir en 0.5, lo que logra un equilibrio entre el escalado de ancho y alto, asegurando que los elementos de su interfaz de usuario se escalen de manera uniforme, independientemente de si la pantalla es más ancha o más alta que la referencia.Consejo de anclaje de UI: Para mantener los botones anclados a bordes específicos de la pantalla (superior/inferior), seleccione su elemento de interfaz de usuario y haga clic en el preset de anclaje deseado en el panel Presets de Anclaje del componente Rect Transform. Aprenda más en la Guía de Anclaje de Unity UI
2. Para conectar su botón a la selección de variante, seleccione su botón en la Jerarquía, encuentre el componente Botón en el Inspector y busque la sección OnClick().
3. Haga clic en "+" para agregar un nuevo evento, arrastre su GameObject con el componente VariantSelect al campo de objeto, elija VariantSelect del menú desplegable y seleccione SelectVariant para activar el cambio de material cuando se haga clic en el botón.
4. Cree botones adicionales para cada acabado de material (Botón de Metal Azul) y conéctelos de la misma manera. Si desea aprender más sobre los fundamentos de uGUI, visite este tutorial para dominar los conceptos básicos.
✓ Punto de control: Haga clic en el modo de juego, luego haga clic en el botón de Metal Rojo y su modelo debería cambiar a un acabado metálico rojo. Haga clic en el botón de Metal Azul para cambiarlo a azul. Debería ver un Canvas y un EventSystem en su Jerarquía, y sus botones deberían ser visibles en la vista del Juego.
Si los botones no funcionan, verifique que sus eventos OnClick estén correctamente conectados y consulte la documentación de Botón de Unity.
Para usuarios avanzados: Si se siente cómodo con la programación, este video a partir del minuto 20:10 muestra cómo generar automáticamente botones de interfaz de usuario utilizando el script VariantSetController, que crea botones dinámicamente con nombres y funcionalidades correctas.
Agregar controles de cámara
Una interfaz de configurador completa también debería dar a los usuarios control sobre cómo ven el producto, permitiéndoles explorar diferentes ángulos y perspectivas.
Para ofrecer a su configurador la mejor experiencia de usuario, puede utilizar el paquete Cinemachine, que proporciona una solución sin código para configurar vistas de cámara profesionales. El proyecto de muestra del configurador ya incluye una configuración de Cinemachine, por lo que puede comenzar a agregar sus propias cámaras de inmediato.
1. Para crear un nuevo ángulo de cámara para su producto, vaya a GameObject > Cinemachine > Cámara para agregar una nueva cámara virtual a su escena. Coloca esta cámara para mostrar tu producto desde el ángulo deseado, por ejemplo, una vista en primer plano que resalte los cambios de material.
- Consejo: Usa Alinear con Vista (Ctrl-Shift-F en Windows o Cmd-Shift-F en Mac) como punto de partida. Esto mueve tu cámara a la misma posición que tu vista de Escena. Desde esta posición, es más fácil encontrar el ángulo deseado.
2. En el componente de Cámara Cinemachine, establece el valor de Prioridad para determinar cuándo esta cámara debe estar activa (números más altos tienen prioridad). Usa el botón Solo en el componente de cámara Cinemachine para probar tus diferentes vistas de cámara.
3. Agrega de dos a tres cámaras para diferentes ángulos de visión. El componente Cerebro Cinemachine (agregado automáticamente a tu cámara principal) controla las transiciones entre las diferentes cámaras, siempre tomando la cámara virtual con la mayor prioridad. Mira este video para aprender más sobre el uso de Cinemachine en Unity 6.
4. Conectando cámaras a controles de UI: Para activar diferentes vistas de cámara, crea botones de UI (copia y pega de tus botones de variante de material y renómbralos para las cámaras). Para el evento OnClick, arrastra la cámara que deseas controlar y usa la opción Priorizar. Esto establecerá la prioridad en Más Alta y, por lo tanto, esta cámara virtual será la cámara activa.
5. Configurando el control de cámara interactivo: Para el movimiento de cámara interactivo, usa una Cámara FreeLook que permite el movimiento de órbita controlado por el mouse alrededor de tu producto.
6. Configurando acciones de entrada: En el componente Controlador de Ejes de Entrada Cinemachine, verás la sección Ejes Controlados con opciones de Órbita de Mirada X, Órbita de Mirada Y, y Escala de Órbita. Estos deben configurarse con acciones de entrada Jugador/Mirar del paquete Product Configurator. Para encontrar estas acciones, navega a:
Activos/Muestras/Configurador de Producto/1.6.0/Configuración Estándar/AcciónUIEstándar
Arrastra la acción Jugador/Mirar de esta carpeta a los campos de entrada para Mirar Órbita X y Mirar Órbita Y en la sección Ejes Controlados. Esto habilita la cámara controlada por el mouse solo cuando se hace clic en el botón derecho del mouse
Ahora estás listo para probar tu configurador con múltiples ángulos de cámara que los usuarios pueden controlar a través de la interfaz.
Últimos retoques y despliegue web
Con tu configurador interactivo completo, el último paso es prepararlo para el despliegue web para que los usuarios puedan acceder a él desde sus navegadores.
Construir para WebGL con Perfiles de Construcción
Para desplegar tu configurador en WebGL, usa la opción Web como plataforma. Navega a Archivo > Perfiles de Construcción y selecciona Web como tu plataforma objetivo en el lado izquierdo de la ventana. Asegúrate de que tu escena esté presente en la lista de Escenas y elimina cualquier otra escena que no quieras construir.
Para desplegar tu configurador en WebGL, usa la opción Web como plataforma.
Si ves el mensaje No se ha cargado el módulo Web con un botón Instalar con Unity Hub, necesitarás instalar el módulo Soporte de Construcción WebGL. Haz clic en el botón de instalar y Unity Hub descargará e instalará el módulo de Soporte de Construcción WebGL. Necesitarás reiniciar el Editor para cargar el nuevo módulo.
Una vez que el módulo de Soporte de Construcción WebGL esté instalado, configura los ajustes de construcción, incluyendo opciones de compresión de texturas, niveles de optimización de código y restricciones de memoria adecuadas para el despliegue en el navegador.
Después de cambiar a la plataforma WebGL, revisa la Configuración del Jugador para la optimización específica de la web. Ve a Editar > Configuración del Proyecto > Jugador y selecciona la pestaña Web. En la sección Ajustes de Publicación, puedes establecer el Formato de Compresión en Brotli (recomendado para tamaños de archivo más pequeños). Consulta la documentación de ajustes del reproductor web de Unity para obtener orientación detallada sobre cómo optimizar estos ajustes
Una vez que todo esté listo, haz clic en Construir y Ejecutar. Unity generará una carpeta con todo lo necesario para lanzar tu configurador en un navegador web. El navegador se abrirá automáticamente y deberías ver tu compilación funcionando sin problemas. Si solo haces clic en Build, necesitarás alojar la salida en un servidor web local o remoto. Unity también ofrece una opción de alojamiento a través de Unity Play.
Ahora deberías ver una ventana del navegador abierta y tu aplicación está en vivo.
Prueba y publica en línea
Prueba tu configurador en diferentes navegadores y dispositivos para asegurar un rendimiento consistente. Los componentes del paquete funcionan bien en compilaciones de WebGL, pero considera cómo el cambio de variantes se desempeña en los dispositivos de destino y ajusta la complejidad en consecuencia.
Unity crea una carpeta de compilación completa que contiene un archivo index.html, datos de juego comprimidos y todos los activos necesarios. Esta carpeta puede ser alojada en cualquier servidor web estándar, haciendo que tu configurador sea accesible a través de cualquier navegador web moderno.
✓ Éxito Final: Ahora tienes un configurador de productos funcional. Tu carpeta de compilación debería contener un archivo index.html que, al abrirse en un navegador (o alojarse en un servidor web), muestra tu modelo 3D con botones interactivos de Metal Rojo y Metal Azul que cambian el acabado de tu modelo en tiempo real.
Opcional: Crea un entorno industrial realista
Para una presentación profesional mejorada, considera agregar uno de los paquetes de entorno de la tienda de activos de Unity. Unity proporciona entornos industriales oficiales como Unity Factory y Unity Warehouse, o busca configuraciones de estudio limpias con iluminación preconfigurada y perfiles de post-procesamiento. Estos paquetes proporcionan la base para la visualización realista de productos sin requerir una creación extensa de entornos. Además, Unity Hub incluye la plantilla URP 3D Sample Scene que demuestra configuraciones de iluminación y renderizado optimizadas.
Opcional: Interfaz avanzada con UI Toolkit
Para un desarrollo de UI más avanzado, Unity ofrece UI Toolkit, que se basa en prácticas de desarrollo web, utilizando estructuras similares a CSS y XML (en UI Toolkit, los equivalentes se llaman USS y UXML). Construir la interfaz de tu configurador utilizando UI Toolkit requiere algo de codificación en C# para definir y temporizar la funcionalidad de los botones. Esto se debe a que UI Toolkit no ofrece una forma lista para usar de conectar los clics de los botones con la funcionalidad. La interfaz de usuario del proyecto de muestra está construida con Unity UI Toolkit, ofreciendo valiosas ideas sobre su implementación.
A continuación, puedes ver un pequeño fragmento de código que muestra cómo hacer que un botón específico (llamado cambiar) realice una acción definida del componente de selección 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 a agregar un botón a tu UI utilizando UI Toolkit, consulta este tutorial en Unity Learn.
Opcional: Funcionalidad avanzada de variantes
Más allá del intercambio básico de materiales, el paquete admite variantes de animación y transformación para demostraciones dinámicas. Utiliza estos para productos con partes móviles, componentes ajustables o características que se benefician de exhibiciones animadas. Las variantes de transformación manejan modificaciones de posición, rotación y escala, mientras que las variantes de animación demuestran funcionalidad o proporcionan transiciones atractivas. Estas características avanzadas funcionan muy bien cuando deseas mostrar la funcionalidad del producto o crear experiencias de configurador más atractivas.
Más allá del intercambio básico de materiales, también puedes usar variantes de animación y transformación para demostraciones dinámicas.
Ahora tienes el conocimiento básico sobre cómo construir un configurador con el paquete de Configurador de Productos de la Industria de Unity. Ya sea que estés construyendo para equipos industriales, productos de consumo o visualización arquitectónica, esta base proporciona todo lo necesario para crear configuradores atractivos que impulsen resultados comerciales.
Read the article
Fill out this form to stay up-to-date with Unity’s latest offerings and solutions
