El configurador se puede usar como una visualización dinámica del funcionamiento del sistema según lo especificado por los equipos de diseño de producto. Se convierte fácilmente en una herramienta útil para varios departamentos que permite al usuario observar el rendimiento en tiempo real del equipo de aire acondicionado, la composición de los materiales, así como ver las dimensiones y la interfaz de usuario. El configurador de aire acondicionado también es una visualización digital que permite a los consumidores configurar y probar el sistema de refrigeración en tiempo real seleccionando detalles de los requisitos de refrigeración y sus preferencias de eficiencia energética.
El objetivo de este configurador de aire acondicionado es explicar todas las funciones usando elementos personalizados de UI flotante, interacciones y animaciones.
La UI flotante debe:
La animación debe:
El proyecto se modeló desde cero en Vectary Studio utilizando objetos primitivos, el modo edición y modificadores. La parte superior del aire acondicionado se dibujó primero en Figma y se importó como un archivo .svg, donde se convirtió en geometría y se usó en una booleana para crear el recorte.
Vamos a dividir este proyecto en varias categorías, empezando por las animaciones. Hay un total de cuatro animaciones: Start, Stop, Fan y Swing mode. Como sugieren sus nombres, cada una realiza una función específica.
Crear varias animaciones en lugar de una sola te da más control sobre ellas. Al configurar interacciones, puedes crear la sensación de una animación continua utilizando retrasos ajustados a duraciones específicas según su duración. De este modo, una animación empieza cuando termina la anterior. Este método ofrece un control mucho mejor de las animaciones más adelante, al emparejarlas con elementos de la UI flotante y configurar las interacciones. No olvides configurar las condiciones; de lo contrario, puede que el orden no funcione. Por ejemplo, el modo Swing activa la animación Swing, que solo se puede reproducir una vez que la animación Start haya finalizado.
Toda la escena está configurada con un esquema de colores neutro en gris claro/blanco. Los equipos de aire acondicionado de interior suelen integrarse en la habitación y no llaman mucho la atención, razón por la cual elegimos el color blanco y materiales metálicos. Un detalle de diseño genial de este aire acondicionado en concreto es la cubierta frontal, que oculta los componentes internos cuando el aparato no está en funcionamiento. Sobre la cubierta, hay una fina pieza de geometría con un material de cristal aplicado, lo que le aporta profundidad y unos reflejos atractivos. La temperatura y los iconos están situados debajo de este panel de cristal. Se horneó un mapa de luces (lightmap) en las partes exteriores, mientras que la oclusión ambiental (AO) se utilizó para las partes internas. Las texturas de AO son más pequeñas en comparación con los mapas de luces, lo que las hace ideales para zonas donde no se necesita un gran nivel de detalle.
Los materiales animados se aplican a dos planos con modificadores noise y bend utilizando archivos Lottie en formato .json, ambos configurados como emisivos con algo de opacidad.
Consejo: El plano del suelo no se puede rotar. Para conseguir una sombra distribuida de manera uniforme en la pared detrás del aire acondicionado, usa un plano con un mapa de AO horneado.
La UI flotante imita una versión simplificada del mando a distancia de un aire acondicionado real. Incluye un botón de encendido/apagado, botones para subir/bajar la temperatura y botones para activar/desactivar el modo Swing y la filtración de aire. La visibilidad de la FUI se puede activar o desactivar haciendo clic en el icono del logotipo de la esquina, garantizando así que no cubra el Canvas continuamente.
El icono del purificador de aire activa la visibilidad de dos estados de icono: uno con un color que indica que está apagado y otro en verde que indica que está encendido. También activa la visibilidad de un icono de hoja en 3D en el propio aire acondicionado.
El modo Swing activa la animación Swing con la condición de que la animación Start haya finalizado.
El icono del botón de encendido utiliza un truco con dos iconos que se alternan mediante interacciones de mostrar/ocultar (hide/unhide), eliminando la necesidad de definir condiciones. Este botón activa varias acciones, como mostrar el flujo de aire con materiales animados, mostrar el estado del botón de encendido como On, reproducir la animación Start y mostrar la temperatura con texto en 3D. Al apagarlo, se activa la animación Stop y se ocultan los materiales animados del flujo de aire con flechas.
El aspecto más importante de este proyecto es el uso de Eventos, que definen una lógica determinada según el comportamiento de los elementos. En esta escena, los eventos controlan los ajustes de temperatura. Primero, tienes que definir el valor del evento al cargar (on-load). Usamos el tipo de evento Number, donde se crea un nuevo evento Temp_def con un valor establecido en 24. Esto significa que, en cuanto abras el proyecto, la temperatura por defecto en la FUI y en el aire acondicionado será de 24. Puedes insertar este Temp_def en otros elementos de Studio, como un texto en 3D o el campo de texto de la UI flotante.
A continuación, tienes que definir que, al hacer clic, Temp_def aumentará en una unidad. La nueva interacción tendrá este aspecto:
La interacción para bajar la temperatura se configura al hacer clic en el icono Down, con una condición para el evento mínimo de tipo número, evento Temp_def y valor mayor que 18. Después, la acción se configura en evento, tipo número, evento Temp_def y valor Temp_def-1.
Esta configuración garantizará que al hacer clic en los iconos de subir o bajar se aumente o disminuya la temperatura en 1, con un mínimo of 18 y un máximo de 28.
