{"id":24444,"date":"2020-08-19T12:21:09","date_gmt":"2020-08-19T12:21:09","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=24444"},"modified":"2020-08-21T11:45:48","modified_gmt":"2020-08-21T11:45:48","slug":"enhance-user-experience-with-use-of-3d-view-in-canvas-apps","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2020\/08\/enhance-user-experience-with-use-of-3d-view-in-canvas-apps\/","title":{"rendered":"Enhance user experience with use of 3D View in Canvas Apps"},"content":{"rendered":"

Introduction<\/strong><\/h2>\n

Recently we had a requirement to create a mobile app to show the product information. So, we decided to develop the app in Canvas App. Canvas App is No code\/low code business app. You can design the app by dragging and dropping elements onto a canvas. To show product information in text format is good but if we were to show the same information in 3D images then that will be an added advantage and good visual representation. With the help this 3D view, customer also gets a clearer picture of the product. Now, to show 3D images in Canvas App there is option called \u2018View in 3D\u2019<\/strong>.<\/p>\n

Note: The \u2018View in 3D\u2019 control in not available by default. <\/em><\/strong><\/p>\n

Follow the below steps to enable \u2018View in 3D\u2019 control:<\/p>\n

1. Select File from the top menu from Canvas App.<\/p>\n

2. Go to the Settings -> Advanced settings ->\u00a0 Scroll down to \u2018Mixed reality features\u2019 option\u00e0Set the option to \u2018On\u2019 as shown below.<\/p>\n

We have explained about mixed reality in our previous blog<\/a> also.<\/p>\n

\"3D<\/p>\n

When we set Mixed reality features \u2018On\u2019 then we are able to see \u2018View in 3D\u2019 control in Canvas App.<\/p>\n

To add the \u2018View in 3D\u2019 control in Canvas App, we need to go to the \u2018Insert tab\u2019, select Media menu and in that select \u2018View in 3D\u2019 control as shown below:<\/p>\n

\"3D<\/p>\n

After clicking on it, \u2018View in 3D\u2019 control will be added in Canvas App and the right hand side will display all properties.<\/p>\n

\"3D<\/p>\n

From properties window we can set properties for control as per requirement. The main property to show 3D view is in \u2018Source\u2019 property.<\/p>\n

In \u2018Source\u2019 property we can put URL that points to 3D model file (.glb\/gltf). The \u2018View in 3D\u2019 component supports models from publicly accessible, CORS-compliant URLs, Base64-encoded URIs, Attachments or media content accessed through data connectors.<\/p>\n

We can set the source for View in 3D control as a URL that has a \u2018.glb\/gltf\u2019 file, as a base64-encoded URI.<\/p>\n

We can’t view a 3D model in your app if the file is on a server that has restrictive cross-origin (CORS). To resolve this issue, the hosting server must permit cross-origin requests from powerapps.com<\/p>\n

In our case we have used Dropbox to store 3D images, you can use any other sources link such as GitHub, One Drive, SharePoint, etc.<\/p>\n

To use file from Dropbox, follow the below steps:<\/p>\n

1. Login to Dropbox account.<\/p>\n

2. Upload file in Dropbox.<\/p>\n

3. Select that file and click on Share. Once you click on it then below window will open, in that click on Create link.<\/p>\n

\"3D<\/p>\n

Once we click on \u2018Create link\u2019, it will create download link as shown below:<\/p>\n

https:\/\/www.dropbox.com\/s\/96fl73l9j53ik4a\/XR_Phone.gltf?dl=0<\/a><\/p>\n

When we enter the above URL is Source property of \u2018View in 3D\u2019 control then it will show the below error message:<\/p>\n

\"3D<\/p>\n

In order for this URL to work in Canvas App, we have to make the below modifications:<\/p>\n

Replace \u2018www\u2019<\/strong> in the URL with \u2018dl\u2019<\/strong>, and remove \u2018?dl=0\u2019<\/strong> at the end.<\/p>\n

The modified URL will look as follows:<\/p>\n

https:\/\/dl.dropbox.com\/s\/96fl73l9j53ik4a\/XR_Phone.gltf<\/a><\/p>\n

Now enter the above URL and it will start displaying the information in 3D view.<\/p>\n

We can also store 3D file in SharePoint\/One Drive and use gallery of Canvas App and get the . glb\/gltf file from there and set in source property of \u2018View in 3D\u2019 control.<\/p>\n

Once it is developed and published, the sales persons can use the app.<\/p>\n

Now when the sales person go to the customer, they can open the Canvas App in their mobile and show the product information along with 3D view so that the customer gets better idea of the product.<\/p>\n

\"3D<\/p>\n

\"3D<\/p>\n

Conclusion<\/strong><\/h2>\n

In this way, with the help of \u2018View in 3D\u2019 control you can enhance user experience by providing information in 3D view.<\/p>\n","protected":false},"excerpt":{"rendered":"

Introduction Recently we had a requirement to create a mobile app to show the product information. So, we decided to develop the app in Canvas App. Canvas App is No code\/low code business app. You can design the app by dragging and dropping elements onto a canvas. To show product information in text format is\u2026 Read More »<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":24453,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[1954,16,18],"tags":[2064],"class_list":["post-24444","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-canvas-apps","category-dynamics-365","category-dynamics-365-v9-2","tag-3d-view-in-canvas-apps"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24444","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=24444"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/24444\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/24453"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=24444"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=24444"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=24444"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}