El configurador de escritorios elevables se puede utilizar durante la fase de prototipado (insertándolo en Figjam o Miro) o como contenido de marketing digital (insertándolo en un sitio web). Al conectarlo con una API, el configurador también puede funcionar como calculadora de precios e integrarse perfectamente en el flujo de trabajo del carrito de compra.
Este configurador representa el gemelo digital de un escritorio elevable con tres componentes interactivos para explicar el funcionamiento del producto. Las interacciones deben mostrar:
La variante final también debe previsualizarse en realidad aumentada (AR) para verla en un entorno físico real.
El escritorio se modeló en el software CAD Plasticity utilizando NURBS, luego se exportó como archivo .step y se importó en Vectary Studio. La geometría CAD importada se ajustó para reducir la cantidad de polígonos y se horneó en una geometría de malla. El tablero de la mesa se desplegó en UV en Substance Painter, donde también se diseñaron sus texturas.
Todas las interacciones de esta escena están controladas y se activan mediante 3 hotspots.
1. Selector de materiales
Activa la visibilidad de la Floating UI haciendo clic en el hotspot. Esta interacción abrirá la FUI, donde verás el nombre y la muestra de color de ese material específico. En este caso, la FUI consta de solo 3 imágenes, por lo que el texto no se creó en la propia FUI, sino que se importó como una sola imagen. Es un gran truco si quieres acelerar el proceso y no complicarte con el diseño en la propia Floating UI. Al hacer clic en una de estas imágenes, se activa otra interacción: Materiales. Aquí puedes seleccionar cualquier cantidad de objetos y especificar qué material debe activarse. Como este configurador tiene dos tamaños de tablero diferentes, tendrás que cambiar los materiales de ambos.
2. Movimiento
El movimiento se controla mediante hotspots que activan la 'Transformation' hacia arriba o hacia abajo a lo largo del eje Z.
Consejo: Crea un grupo con todos los objetos que quieras que se vean afectados por la transformación. Si quieres que los hotspots se muevan con determinados objetos, inclúyelos también en ese grupo.
3. Tamaño
El último hotspot controla el tamaño del tablero de la mesa, ya que activa el tamaño pequeño o grande, pero también cambia de hotspot. Esto se debe a que ambos hotspots están en la variante, lo que crea un bucle infinito. Haz clic en el hotspot grande para activar el tablero grande y el hotspot pequeño. Al hacer clic en el hotspot pequeño, ocurre al revés.
Consejo: Cada tablero de mesa tiene un lightmap horneado por separado, lo que garantiza que las sombras se mantengan en el lugar correcto al cambiar de tamaño.
La configuración de iluminación consta de tres luces, dos rectangulares y una direccional , además de un entorno HDRi. El objetivo era iluminar la parte superior para crear un reflejo agradable en la superficie de la mesa, logrando a la vez bordes contrastados desde otros ángulos. La luz direccional dispersa la luz de forma uniforme por toda la escena, lo que permite controlar por completo su dirección a través de un punto de pivote. Las luces rectangulares se usaron para zonas más pequeñas de la mesa.
Un truco: después de hornear, desactivar la proyección de sombras de cada luz puede mejorar el rendimiento.
En cuanto a los materiales, el objetivo era lograr una escena neutra de tipo estudio con un fondo infinito, sombras suaves y la madera como punto focal principal. Las patas presentan un material no metálico sencillo con un acabado blanco, mientras que el tablero de la mesa emplea una única textura desplegada. Se crearon tipos de materiales adicionales al duplicar este material base y ajustar el tono, el contraste y el brillo. Este método reduce significativamente el tamaño del archivo y el tiempo de carga al compartirlo.
Cuando estés satisfecho con el aspecto y la iluminación de la escena, inicia el proceso de horneado. El horneado mejora el realismo de la escena al añadir pequeñas sombras y oclusión ambiental.
Un truco: hornea a una resolución más alta y luego redúcela. Por ejemplo, hornea a una resolución de 2K y luego establece la resolución final en 1K. No olvides activar la reducción de ruido (denoising). Antes de hornear, previsualiza la escena en el modo Lightmap preview y presta atención a los elementos móviles, como las patas, para evitar sombras no deseadas.
La variación final también debe previsualizarse en realidad aumentada (AR) para verla en un espacio físico real. Es importante trabajar con las dimensiones correctas, ya que el modelo se trasladará a la realidad aumentada a escala 1:1. Los ajustes de AR te permiten activar o desactivar la escala mientras previsualizas el archivo. Actualmente, la única forma de animar tu escena en AR es a través de animaciones: la primera animación en el modo de animación (Animation) será la que se reproduzca en bucle y se muestre en AR. En este ejemplo, pusimos en bucle el movimiento del escritorio para que suba y baje.
Este fabricante de muebles premium usó la plataforma Vectary para crear un configurador inmersivo para su sitio web. Todo lo hizo una sola persona - su diseñador de producto - que no tenía experiencia previa trabajando con Vectary.
