Build a simple product configurator in Unity in one hour or less
Para tu comodidad, tradujimos esta página mediante traducción automática. No podemos garantizar la precisión ni la confiabilidad del contenido traducido. Si tienes alguna duda sobre la precisión del contenido traducido, consulta la versión oficial en inglés de la página web.
Un configurador de productos puede transformar la forma en que los clientes interactúan con sus productos, llevando la experiencia más allá de la simple visualización de imágenes estáticas a una experiencia interactiva, proporcionando en última instancia al usuario detalles más completos y mayor información.
En aplicaciones industriales, los configuradores pueden mostrar equipos complejos, permitir la personalización en tiempo real y ayudar a los clientes a visualizar los productos en sus contextos específicos.
En este tutorial, crearás tu primer configurador de productos implementable en la web en una hora o menos. Tu configurador permitirá a los usuarios cambiar diferentes materiales en un modelo 3D mediante una interfaz sencilla. Al finalizar, comprenderás las características fundamentales para crear configuradores de productos profesionales.
Si prefieres seguir este tutorial paso a paso con un vídeo, puedes verlo aquí .
Para obtener más información, consulte nuestro seminario web sobre el tema.Plantilla de configurador de productos
Requisitos previos
Este tutorial está dirigido a desarrolladores con conocimientos de nivel principiante a intermedio en el desarrollo de proyectos en Unity. Para completar el tutorial, necesitarás:
1. Instale lo siguiente :
- Compatibilidad con compilación de Unity 6 con WebGL
- Una licencia de prueba o regular para Unity Industry
- Paquete Industry Product Configurator de Unity, disponible en GitHub.
2. Agregar un modelo 3D : Utilice su propio archivo de modelo 3D o el que se incluye en la plantilla.
3. Agregar materiales básicos : Ten a mano al menos 2 o 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 ejemplo Industry Product Configurator 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 prefabricados para la visibilidad, así como variantes de material, animación y transformación, para que pueda centrarse en su producto en lugar de crear sistemas de variantes desde cero.
Abre el proyecto de ejemplo y crea tu propia escena.
Al explorar primero el proyecto de ejemplo, obtendrá experiencia práctica con un configurador de productos antes de crear el suyo propio. Sigue estos pasos para instalarlo:
1. En Unity Hub, crea un nuevo proyecto de Unity utilizando la plantilla Universal 3D basada en Universal Render Pipeline (URP).
2. Descargue e instale el proyecto de ejemplo Industry Product Configurator :
- Para instalar el paquete, copie la URL del botón verde " Código" en el repositorio de GitHub y abra el Administrador de paquetes de Unity.
- Haz clic en el icono de más y selecciona Agregar paquete desde URL de Git , luego pega el enlace del repositorio. Unity descargará e instalará todos los componentes necesarios.
3. Una vez finalizada la descarga, abre la escena de ejemplo y ejecútala para ver un configurador completamente funcional en acción. La muestra demuestra el cambio de materiales, la activación/desactivación de la visibilidad de los componentes y los controles de la cámara, lo que permite comprender de inmediato las posibilidades y el funcionamiento del sistema. Este paquete añade componentes específicos del configurador a los sistemas existentes de Unity para impulsar el desarrollo de tu prototipo.
4. Nota: Si tiene problemas con la instalación de la URL de Git , consulte la guía de solución de problemas del Administrador de paquetes .
✓ Punto de control : Ahora debería ver las opciones del Configurador de productos al hacer clic con el botón derecho en la Jerarquía o en el menú Objeto de juego. En el repositorio de GitHub también encontrarás buenas instrucciones para el ejemplo del configurador, que te ayudarán a sacarle el máximo provecho.
El configurador de productos se abre en el Editor.
Traer un modelo 3D
Una vez que haya dedicado un tiempo a explorar la muestra, el siguiente paso es importar un modelo 3D al que añadirá la funcionalidad de cambio de material. Si desea completar este tutorial más rápidamente, puede utilizar el modelo Skidloader que ya está incluido en el ejemplo (busque Skidloader). O bien, puede traer fácilmente su propio modelo con una de las dos opciones de conversión que se explican en la siguiente sección: La función Optimizar y convertir dentro de Unity Asset Manager o Unity Asset Transformer Toolkit. También puede omitir esta sección si desea utilizar el modelo incluido en el proyecto de ejemplo.
Asset Manager
Si planea crear configuradores profesionales, considere integrar Asset Manager en su flujo de trabajo. Unity Asset Manager es una solución de gestión de activos digitales (DAM) basada en la nube que simplifica la forma en que 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 la suscripción a Unity Industry .
Puedes preparar y optimizar tus modelos 3D utilizando Asset Manager, concretamente con su función Optimizar y convertir . Esto transforma tus recursos 3D limpiando las mallas, optimizando el número de polígonos y convirtiéndolos a formatos compatibles con Unity. Este proceso se completa en menos de un minuto y mejora la eficiencia del flujo de trabajo para la conversión de archivos grandes.
Obtenga más información sobre Asset Manager aquí:
- Cómo usar Unity Asset Manager
- Introducción a los métodos de transferencia del Asset Manager .
Flujo de trabajo CAD con Asset Transformer Toolkit
Si necesita convertir modelos CAD complejos, considere utilizar Unity Asset Transformer Toolkit , que admite varios formatos de archivos CAD y proporciona funciones de optimización avanzadas. Importa los modelos CAD directamente a Unity y, a continuación, utiliza las herramientas de Asset Transformer para reducir el número de polígonos, simplificar los materiales y preparar los modelos para su visualización en tiempo real.
Obtenga más información sobre el plugin Asset Transformer aquí:
Prepara tu escena
Empieza por crear una nueva escena para tu configurador. Añade la minicargadora a la escena vacía o, si utilizas tu propio modelo 3D , impórtalo a la escena y colócalo en la posición adecuada. El modelo ya está listo para que añadas la funcionalidad de cambio de material que observaste en el proyecto de ejemplo.
✓ Punto de control : Tu escena debe contener tu modelo 3D posicionado de manera que puedas verlo claramente en la vista de escena. El modelo debe tener materiales aplicados y ser visible en la vista del juego.
Desarrollar la funcionalidad de cambio de material
Ahora implementarás la función principal del configurador, que permitirá a los usuarios cambiar los materiales de tu producto en tiempo real.
Crear variantes de material
1. Para empezar, utiliza el componente integrado para conjuntos de variantes, seleccionándolo en el menú GameObject o haciendo clic con el botón 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 el material objetivo en jerarquías de objetos complejas.
2. Defina el material base y el objeto padre utilizando la opción Target Parent en el componente, y luego deje que la herramienta Capture identifique todos los renderizadores de malla relevantes. Esto garantiza la uniformidad entre productos con múltiples componentes, manteniendo al mismo tiempo 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). Asigne los materiales a cada ranura de variante arrastrándolos a los campos de variante. El sistema gestiona toda la lógica de conmutación, actualizando automáticamente los materiales cuando cambian las variantes. Utilice el control deslizante de vista previa integrado en el Inspector para probar variantes de inmediato y ver cómo se ven los acabados rojo y azul en su modelo.
✓ Punto de control : Ahora debería ver dos variantes de material (Pintura metálica - Roja y Pintura metálica - Azul) en el componente Conjunto de variantes de material . Al arrastrar el control deslizante de vista previa en el Inspector, el modelo debería cambiar entre los acabados metálicos rojo y azul en tiempo real en la vista de escena.
Para obtener ayuda sobre la creación de materiales, consulte 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 usuarios sin conocimientos de programación puedan seleccionar fácilmente conjuntos de variantes en la escena y se integra directamente con el sistema de eventos de Unity, lo que permite crear configuradores funcionales sin necesidad de programación personalizada. Esto resulta especialmente útil para los usuarios que utilizan la solución uGUI, ya que les permite asignar directamente el componente al evento OnClick .
Crear la interfaz de usuario
Una vez que sus variantes de material funcionen correctamente, necesita una interfaz que permita a los usuarios controlar estas configuraciones e interactuar con su configurador de productos.
Unity ofrece dos sistemas de interfaz de usuario: un sistema de interfaz de usuario basado en GameObject (uGUI) y el más reciente UI Toolkit. Para este tutorial, utilizaremos el sistema uGUI basado en GameObject, ya que permite la integración mediante arrastrar y soltar con el componente VariantSelect sin necesidad de escribir ningún código.
1. Arrastra y suelta un botón del menú de la interfaz de usuario en la jerarquía y asígnale un nombre (por ejemplo, "Botón metálico rojo").
- Cuando crees tu primer elemento de interfaz de usuario, Unity creará automáticamente objetos Canvas y EventSystem en tu escena. El Canvas actúa como contenedor de todos los elementos de la interfaz de usuario, mientras que el EventSystem gestiona la entrada del usuario, como los clics en los botones.
- Asegúrese de que el componente Canvas esté configurado en Escalar con el tamaño de la pantalla . Esta configuración permite que los elementos de la interfaz de usuario mantengan proporciones consistentes en diferentes resoluciones de pantalla. Establezca la resolución de referencia para que coincida con las dimensiones de la pantalla de destino; en este ejemplo, podría ser 1920x1080 . Esto define la resolución base sobre la que se sustenta el diseño de la interfaz de usuario. Además, configure la propiedad Match en 0.5 , lo que logra un equilibrio entre el escalado de ancho y alto, asegurando que los elementos de la 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 la interfaz de usuario: Para mantener los botones anclados a bordes específicos de la pantalla (superior/inferior), seleccione el elemento de la interfaz de usuario y haga clic en el ajuste preestablecido de anclaje deseado en el panel Ajustes preestablecidos de anclaje del componente Transformación rectangular. Obtén más información en la Guía de anclaje de la Unity UI.
2. Para conectar tu botón a la selección de variantes, selecciona tu botón en la jerarquía, busca el componente Button en el inspector y busca la sección OnClick() .
3. Haz clic en " + " para agregar un nuevo evento, arrastra tu GameObject con el componente VariantSelect al campo de objeto, elige VariantSelect en el menú desplegable y selecciona SelectVariant para activar el cambio de material cuando se haga clic en el botón.
4. Crea botones adicionales para cada acabado de material (Botón de metal azul) y conéctalos de la misma manera. Si quieres aprender más sobre los fundamentos de uGUI, visita este tutorial para dominar lo básico .
✓ Punto de control : Haz clic en el modo de reproducción, luego haz clic en el botón Rojo Metálico y tu modelo debería cambiar a un acabado rojo metálico. Haz clic en el botón Azul Metálico para cambiarlo a azul. Deberías ver un Canvas y un EventSystem en tu jerarquía, y tus botones deberían ser visibles en la vista del juego.
Si los botones no funcionan, verifica que tus eventos OnClick estén conectados correctamente y consulta la documentación de Unity sobre botones .
Para usuarios avanzados: Si te sientes cómodo con la programación, este vídeo, 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 los nombres y la funcionalidad correctos.
Agregar controles de cámara
Una interfaz de configuración completa también debería dar a los usuarios control sobre cómo visualizan el producto, permitiéndoles explorar diferentes ángulos y perspectivas.
Para ofrecer la mejor experiencia de usuario a su configurador, puede utilizar el paquete Cinemachine , que proporciona una solución sin código para configurar vistas de cámara profesionales. El proyecto de ejemplo del configurador ya incluye una configuración de Cinemachine , por lo que puedes empezar a añadir tus propias cámaras de inmediato.
1. Para crear un nuevo ángulo de cámara para tu producto, ve a GameObject > Cinemachine > Camera para añadir una nueva cámara virtual a tu escena. Coloca la cámara de manera que muestre el producto desde el ángulo deseado, por ejemplo, un primer plano que resalte los cambios en el material.
- Consejo: Utilice la opción Alinear con la vista (Ctrl+Mayús+F en Windows o Cmd+Mayús+F en Mac) como punto de partida. Esto mueve la cámara a la misma posición que la vista de escena. Desde esta posición, es más fácil encontrar el ángulo deseado.
2. En el componente Cámara de Cinemachine , configure el valor de Prioridad para determinar cuándo debe estar activa esta cámara (los números más altos tienen prioridad). Utilice el botón Solo en el componente de cámara de Cinemachine para probar las diferentes vistas de cámara.
3. Añade dos o tres cámaras para obtener diferentes ángulos de visión. El componente Cinemachine Brain (que se añade automáticamente a la cámara principal) controla las transiciones entre las diferentes cámaras, dando siempre prioridad a la cámara virtual. Vea este vídeo para obtener más información sobre cómo usar Cinemachine en Unity 6.
4. Conexión de cámaras a controles de interfaz de usuario: Para activar diferentes vistas de cámara, crea botones de interfaz de usuario (copia y pega los botones de tu variante de Material Design y cámbiales el nombre para cada cámara). Para el evento OnClick, arrastre la cámara que desea controlar y utilice la opción Priorizar . Esto establecerá la prioridad en Máxima y, por lo tanto, esta cámara virtual será la cámara activa.
5. Configuración del control interactivo de la cámara: Para un movimiento de cámara interactivo, utilice una cámara FreeLook que permite el movimiento orbital controlado con el ratón alrededor del producto.
6. Configuración de acciones de entrada: En el componente Controlador de ejes de entrada de Cinemachine , verá la sección Ejes controlados con las opciones Órbita de visión X , Órbita de visión Y y Escala de órbita . Estos elementos deben configurarse con las acciones de entrada de Player/Look del paquete Product Configurator. Para encontrar estas acciones, diríjase a:
Activos/Muestras/Configurador de productos/1.6.0/Configuración estándar/Acción estándar de la interfaz de usuario
Arrastra la acción Player/Look de esta carpeta a los campos de entrada Look Orbit X y Look Orbit Y en la sección Driven Axes . Esto permite controlar la cámara con el ratón solo cuando se hace clic con el botón derecho del ratón.
Ahora ya puedes probar tu configurador con múltiples ángulos de cámara que los usuarios podrán controlar a través de la interfaz.
Últimos retoques y despliegue web
Una vez completado el configurador interactivo, el último paso es prepararlo para su implementación web, de modo que los usuarios puedan acceder a él desde sus navegadores.
Compilación para WebGL con perfiles de compilación
Para implementar su configurador en WebGL, utilice la opción Web como plataforma. Diríjase a Archivo > Crear perfiles y seleccione Web como plataforma de destino 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 crear.
Para implementar su configurador en WebGL, utilice la opción Web como plataforma.
Si ve el mensaje " No se ha cargado ningún módulo web" junto con un botón " Instalar con Unity Hub" , deberá instalar el módulo WebGL Build Support . Haz clic en el botón de instalación y Unity Hub descargará e instalará el módulo de soporte de compilación WebGL. Deberás reiniciar el editor para cargar el nuevo módulo.
Una vez instalado el módulo de soporte de compilación WebGL, configure los ajustes de compilación, incluidas las opciones de compresión de texturas, los niveles de optimización del código y las restricciones de memoria adecuadas para la implementación en el navegador.
Tras cambiar a la plataforma WebGL, revise la configuración del reproductor para optimizarla específicamente para la web. Ve a Editar > Configuración del proyecto > Reproductor y selecciona la pestaña Web . En la sección Configuración de publicación , puede establecer el formato de compresión en Brotli (recomendado para archivos de menor tamaño). Consulte la documentación de configuración del reproductor web de Unity para obtener instrucciones detalladas sobre cómo optimizar esta configuración.
Una vez que todo esté listo, haga clic en Compilar y ejecutar . Unity generará una carpeta con todo lo necesario para ejecutar el configurador en un navegador web. El navegador se abrirá automáticamente y debería ver que la compilación se ejecuta sin problemas. Si solo haces clic en "Compilar" , tendrás que alojar el resultado en un servidor web local o remoto. Unity también ofrece una opción de alojamiento a través de Unity Play . Si utilizas Unity 6.1 o superior, Unity ofrece la opción de publicar directamente en Unity Play desde la configuración de compilación de WebGL.
Ahora debería aparecer una ventana del navegador y su aplicación estará activa.
Prueba y publica en línea.
Pruebe su configurador en diferentes navegadores y dispositivos para garantizar un rendimiento uniforme. Los componentes del paquete funcionan bien en compilaciones WebGL, pero tenga en cuenta cómo se comporta el cambio de variantes en los dispositivos de destino y ajuste la complejidad en consecuencia.
Unity crea una carpeta de compilación completa que contiene un archivo index.html, datos del juego comprimidos y todos los recursos necesarios. Esta carpeta puede alojarse en cualquier servidor web estándar, lo que permite acceder a su configurador a través de cualquier navegador web moderno.
✓ Éxito final : Ahora dispone de un configurador de productos que funciona correctamente. La carpeta de compilación debe contener un archivo index.html que, al abrirse en un navegador (o alojarse en un servidor web), muestre el modelo 3D con botones interactivos de metal rojo y metal azul que cambian el acabado del modelo en tiempo real.
Opcional: Crea un entorno industrial realista
Para una presentación profesional mejorada, considere agregar uno de los paquetes de entorno de Unity Asset Store. Unity ofrece entornos industriales oficiales como Unity Factory y Unity Warehouse , o bien, puedes buscar estudios con configuraciones limpias, con iluminación preconfigurada y perfiles de postprocesamiento predefinidos. Estos paquetes proporcionan la base para una visualización realista del producto sin necesidad de crear entornos complejos. Además, Unity Hub incluye la plantilla de escena de ejemplo URP 3D , que muestra configuraciones optimizadas de iluminación y renderizado.
Opcional: Interfaz de usuario avanzada con UI Toolkit
Para un desarrollo de interfaz de usuario más avanzado, Unity ofrece UI Toolkit , que se basa en las prácticas de desarrollo web y utiliza estructuras similares a CSS y XML (en UI Toolkit, los equivalentes se denominan USS y UXML). Para crear la interfaz de tu configurador usando UI Toolkit, necesitas programar en C# para definir y configurar la funcionalidad de los botones. Esto se debe a que UI Toolkit no ofrece una forma predeterminada de conectar los clics de los botones con la funcionalidad. La interfaz de usuario del proyecto de ejemplo está construida con Unity UI Toolkit, lo que ofrece información valiosa 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 change) realice una acción definida desde el componente de selección 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 a agregar un botón a tu interfaz de usuario usando UI Toolkit, consulta este tutorial en Unity Learn .
Opcional: Funcionalidad de variante avanzada
Además del intercambio básico de materiales, el paquete admite variantes de animación y transformación para demostraciones dinámicas. Utilice estas opciones para productos con piezas móviles, componentes ajustables o características que se beneficien de presentaciones animadas. Las variantes de transformación gestionan las modificaciones de posición, rotación y escala, mientras que las variantes de animación demuestran la funcionalidad o proporcionan transiciones atractivas. Estas funciones avanzadas resultan muy útiles cuando se desea mostrar la funcionalidad del producto o crear experiencias de configuración más atractivas.
Además del intercambio básico de materiales, también puedes utilizar animaciones y variantes de transformación para realizar demostraciones dinámicas.
Ahora ya tienes los conocimientos básicos para crear un configurador con el paquete Industry Product Configurator de Unity. Ya sea que esté diseñando para productos de consumo, equipos industriales o visualización arquitectónica, esta plataforma proporciona todo lo necesario para crear configuradores atractivos que impulsen los resultados comerciales.
