Te presentamos Vectary Canvas, un nuevo espacio para la ideación acelerada por AI. → Canvas

Configurador de estores

Explica y muestra las opciones personalizables con un diseño 3D interactivo.

¿Qué es un configurador de estores?

Diseñado para integrarse en una página web como destino final, el configurador 3D permite a los usuarios ver su propio estor personalizado en un entorno realista. El usuario puede explorar diferentes estilos, materiales, colores, tamaños y características del estor. Al final del proceso de personalización, hay una ventaja adicional que permite al usuario descargar la imagen de su configuración. En un caso práctico real, la imagen se puede descargar y utilizar como referencia digital o en una tienda física.

Desarrollo del concepto

Este configurador de estores, situado sobre un fondo realista, utiliza Floating UI para gestionar todas las interacciones de la escena. El objetivo era hacer que el configurador fuera fácil de usar y entender. La interfaz principal presenta las opciones de menú con elementos visuales en lugar de palabras. Para evitar obstruir la imagen general, solo se utilizó una interfaz.

‍

El hotspot debe:

  • Abrir/Cerrar la FUI

‍

La Floating UI, situada en la esquina superior izquierda de la pantalla, debe:

  • Cambiar entre variantes de estor
  • Cambiar los materiales/colores
  • Cambiar entre dos cámaras
  • Hacer una captura de pantalla de tu configuración final

‍

Cómo crear un configurador 3D de estores

Interacciones

‍

La Floating UI tiene dos funciones principales: el selector de objetos y el selector de materiales.

‍

  • En el selector de objetos, se utilizan imágenes para activar interacciones y elegir una opción de entre cuatro variantes.
  • Cada variante está asociada a su propio menú de materiales con múltiples muestras.
  • Al seleccionar una variante, se activa la visibilidad de las muestras para ese tipo de estor, mientras se ocultan las demás.
  • El icono de la cámara permite al usuario cambiar entre dos vistas: la predeterminada ofrece una vista general de la escena y la secundaria muestra un primer plano de los estores.
  • El icono de la imagen es un elemento interactivo que guardará la imagen de la configuración seleccionada en el dispositivo.

‍

‍

‍

‍

Consejo: Para reducir el número de polígonos, solo se utiliza una pared de fondo, con límites de cámara configurados para evitar la rotación. El entorno detrás de la ventana está representado por un plano simple con una textura de imagen.

Las ventajas de contar con un configurador de estores

Personalización

Visualización

Accesibilidad

Try Business Workspaces

  • Ideate together in Canvas
  • Create and review 3D as a team
  • Organize projects and control access
  • Publish 3D and AR across every channel
  • Scale with APIs, hosting, and expert support
Talk to our team
Vectary Workspaces with shared folders, team cursors, and a 3D material board