Embedding 3D models for mobile AR
By embedding your 3D models into your website, your users will be able to view the models in AR on supported mobile devices.
Whenever you upload a 3D model into Vuframe® Studio, it will automatically be converted into several different file formats. This includes a GLB and a USDZ version. Both these formats can be viewed in 3D and AR on compatible mobile devices without requiring any additional apps. Specifically, Android devices supporting ARCore can display GLB files using Scene Viewer whereas iOS devices supporting ARKit can open USDZ files using QuickLook.
Viewing a model in AR using Google Scene Viewer
Viewing a model in AR using iOS QuickLook
In order to embed your models into your website for mobile AR, you will first need to contact us in order to obtain the links to the GLB and USDZ versions of the corresponding files. You will then need to add links for Android as well as iOS.
Embedding an USDZ file for viewing with compatible iOS devices is relatively easy. All you need to do is add an HTML link tag with the rel attribute set to "ar" and wrap it around an image:
<a href="USDZ_URL" rel="ar">
On compatible iOS devices, an AR button that opens QuickLook will be displayed on top of the image. For more information on embedding USDZ files, please refer to this article.
Embedding a GLB file for viewing on Android devices requires a bit more effort than on iOS. You will need to create a so-called intent link that opens the Scene Viewer application. This link looks as follows (you will need to replace GLB_URL with the link to the GLB version of the model):
<img src="button.png" />
The example above creates an image that opens the model in AR when clicked. This link can be extended by setting additional optional parameters, e.g. the title of the model or a fallback website that users will be redirected to if their device does not support ARCore. For more information, please refer to this section of the Google Developers documentation.
For example, for the following link, the Scene Viewer would display the model title "My Model" and a button linking to www.google.com. In case the user tries to open the link with an incompatible Android device, they will be redirected to the list of Android devices supporting ARCore.