Ejercicio: Ver en MR y Ver en 3D

  • 15 minutos

Easy-Sales es una aplicación de realidad mixta orientada a ventas creada para mejorar la experiencia de compra. Los vendedores que usan esta aplicación pueden inspeccionar y medir el entorno del cliente para determinar qué productos son factibles en el espacio. También pueden ayudar a los clientes a visualizar el producto a través de la realidad mixta.

Implementaremos las funciones Vista en 3D y Vista en MR de Power Apps para visualizar los productos con precisión.

Agregar objetos 3D a la lista de SharePoint

Los modelos e imágenes 3D necesarios para la aplicación se almacenan en la lista de SharePoint . Comencemos agregando los recursos necesarios a esta lista.

  1. En la lista de SharePoint creada denominada Easy Sales, seleccione la columna + Agregar y, a continuación, seleccione Mostrar u ocultar columnas.

    Captura de pantalla para agregar columna.

  2. Asegúrese de que los datos adjuntos están seleccionados y, a continuación, presione Aplicar en la parte superior.

    Captura de pantalla para aplicar datos adjuntos

  3. Seleccione un elemento en la lista y, a continuación, seleccione Agregar datos adjuntos. Seleccione el modelo 3D (archivo .glb) o Imagen (.jpg archivo) en la carpeta personalizada de Power Apps. Siga el mismo procedimiento para todos los elementos de la lista.

    Captura de pantalla para agregar datos adjuntos

  4. Seleccione la lista desplegable situada junto a la columna Datos adjuntos y, después, seleccione Mostrar datos adjuntos primero. Queremos que se coloque primero para facilitar el acceso.

    Captura de pantalla para seleccionar Mostrar datos adjuntos primero.

Crear la página de detalles y añadir el componente Ver en 3D

La página de detalles incluye todos los detalles e información sobre el producto seleccionado. Le ofrece una comprensión de ciertas características del producto. Debe conectar la página del producto que diseñó en la sección anterior y la página de detalles creada en esta sección. Aquí también usará el componente Ver en 3D de Power Apps para agregar contenido 3D a la aplicación de lienzo. Podrá girar y acercar estos objetos 3D para obtener una mejor vista.

  1. Cree dos páginas nuevas y cámbielas Product_details y Carpet_details.

    Captura de pantalla de la creación de páginas detalladas.

  2. Seleccione el > icono del control de galería incluido en la página Productos y Alfombras. A continuación, configure la propiedad OnSelect agregando las líneas siguientes en la pestaña Funciones respectivamente.

    Navigate(Product_details,ScreenTransition.Cover,{content : ThisItem})

    Navigate(Carpet_details,ScreenTransition.Cover,{content_carpets : ThisItem})

    Captura de pantalla de la navegación a los detalles siguientes.

  3. Comencemos a crear la página de Product_details agregando algunas etiquetas, como Price, Dimensions, Weight, Color y Material. Puede editar el texto dentro de la etiqueta, insertando el texto deseado dentro de la propiedad Text de esa etiqueta. Cambie el nombre de las etiquetas en consecuencia.

    Captura de pantalla de la adición de etiquetas

    Nota:

    Puede personalizar el tema, la fuente y la paleta de colores de la aplicación para mejorar la experiencia y la apariencia del usuario.

  4. Inserte otra etiqueta denominada Nombre del producto para mostrar el nombre del producto en la parte superior y Alinearlo en el Centro . Configure la propiedad Text de la etiqueta agregando la línea siguiente:

    content.'{Name}'

    Captura de pantalla de la adición de la etiqueta de título.

  5. Seleccione la lista desplegable Multimedia y, a continuación, seleccione Imagen para insertar una imagen en la pantalla Product_details . Configure la propiedad Image de la siguiente manera:

    content.ImageLink

    Captura de pantalla de la adición de la imagen.

  6. Superpondremos el componente View in 3D sobre el componente Imagen. Los productos que no tienen modelos 3D adjuntos se pueden ver a través del componente Image . Para agregar el componente Ver en 3D, seleccione la lista desplegable Multimedia y Ver en 3D.

    Captura de pantalla de la adición de la vista en 3D.

    Nota:

    En el componente se incluye una forma predeterminada. Puede cambiar esta forma a otra modificando la propiedad Source .

  7. Coloque el componente sobre el componente de imagen, como se muestra en la imagen, y configure la propiedad Source del componente View in 3D como se indica a continuación para conectar modelos 3D desde la lista de SharePoint.

    First(Gallery_products.Selected.Attachments).Value

    Captura de pantalla de la configuración de la vista en 3D.

  8. Modificaremos la propiedad Visible de los componentes Image y View en 3D para ver fácilmente los productos en función del tipo de archivo almacenado en la columna Datos adjuntos . Configure la propiedad Visible de la Imagen y Vista en 3D de los componentes de la siguiente manera:

    • Imagen :

      If(Gallery_products.Selected.FileType = "Image", true, false)

      Captura de pantalla de la modificación de la visibilidad de la imagen.

    • Vista en 3D :

      If(Gallery_products.Selected.FileType = "Model", true, false)

      Captura de pantalla de la modificación de la vista en visibilidad 3D.

  9. Agregue etiquetas en blanco junto a las etiquetas Price, Dimensions, Weight, Color y Material , como se muestra en la imagen para mostrar la información del producto en esos encabezados. Configure la propiedad Text de estas etiquetas de la siguiente manera:

    • Precio :

      content.Price

      Captura de pantalla de la etiqueta en blanco del precio.

    • Dimensiones :

      content.Dimensions

      Captura de pantalla de la etiqueta en blanco para Dimensión.

    • Peso :

      content.Weight

      Captura de pantalla de la etiqueta en blanco para Peso.

    • Color :

      content.Color

      Captura de pantalla de la etiqueta en blanco para Color.

    • Material :

      content.PrimaryMaterial

      Captura de pantalla de la etiqueta en blanco del material.

  10. Agregaremos un icono Atrás para navegar a la pantalla anterior. Para agregar el icono Atrás , expanda la lista desplegable Iconos y seleccione el icono Atrás. Coloque el icono Atrás correctamente y configure la propiedad OnSelect agregando lo siguiente:

    Navigate('Products',ScreenTransition.Cover)

    Captura de pantalla de la adición del icono atrás y OnSelect

    Siga el mismo procedimiento para Carpet_details. Personalice la función Navigate en consecuencia.

    Sugerencia

    Para guardar el progreso, seleccione la pestaña Archivo en la parte superior y seleccione la opción Guardar . También puede usar Ctrl+S para guardar el progreso.

    Nota:

    Evite incluir el componente Ver en 3D en la página Carpet_details. No usamos modelos 3D para la categoría Moqueta .

Componente Ver en MR

La vista en MR es una característica de realidad mixta proporcionada por Power Apps que permite a los usuarios colocar objetos 3D o imágenes en su entorno real. Los modelos e imágenes 3D necesarios para la aplicación se almacenan en la lista de SharePoint . Comencemos agregando los recursos necesarios en la lista de SharePoint .

  1. Agregue el componente Ver en MR a la pantalla Product_details. Abra la pestaña Insertar y, a continuación, expanda la lista desplegable Realidad mixta y, a continuación, seleccione el componente Ver en MR .

    Captura de pantalla de la adición de la vista en el botón MR.

  2. En la pestaña Propiedades del componente Ver en MR , seleccione el campo Origen y escriba para acceder a los modelos 3D almacenados en la lista de SharePoint :

    First(Gallery_products.Selected.Attachments).Value

    Captura de pantalla para agregar el origen de la vista en MR.

    Nota:

    No se incluye la característica Vista en MR para la categoría Alfombras . En su lugar, se calculará el Precio de la alfombra en función del área calculada en la sesión Medir en MR.

Otra propiedad única que proporciona el componente View in MR es El escalado de objetos. Puede editar los tamaños de los modelos 3D externamente cambiando las propiedades Ancho del objeto, Alto del objeto y Profundidad del objeto .

  • Establezca las siguientes propiedades en el panel Propiedad como se muestra en la imagen:

    • Ancho del objeto = 1,5
    • Alto del objeto = 1
    • Profundidad del objeto = 1
    • Unidad de medida = Metros

    Estos valores se establecen según los modelos 3D incluidos en esta aplicación.

    Captura de pantalla para escalar el objeto de vista en MR.

    Nota:

    También puede personalizar los valores pasados al ancho del objeto, el alto del objeto y la profundidad del objeto según sus necesidades. Los valores pasados se toman en las unidades especificadas en Unidad de medida. Elija una unidad de medición adecuada en la lista desplegable y, después, escriba los valores.

    Sugerencia

    Para guardar el progreso, seleccione la pestaña Archivo en la parte superior y seleccione la opción Guardar . También puede usar Ctrl+S para guardar el progreso.

La implementación de los pasos anteriores generará una aplicación con una página de detalles que contiene información detallada del producto. La aplicación también incluirá el componente Ver en 3D, lo que le permitirá incluir contenido 3D. También puede colocar modelos 3D en su entorno real a través del componente Ver en MR . Ahora que ha aprendido a implementar estas características, puede incorporarlas a las aplicaciones futuras.

Animación de la demostración de la aplicación después de implementar la vista en 3d y vista en MR.