On this page
Below is info and recommendations for working with GLB/USD export from KeyShot to embed on a website or prepare for AR viewing:
Embed a 3D Model (GLB) to view on browser or mobile using <model-viewer>
Using <model-viewer> to embed GLB files provides the greatest compatibility for viewing 3D models on the web and in AR. <model-viewer> is a web component that provides:
- Interactive 3D model view in the browser
- Source link to view GLB on Android devices
- Source link to view USD on iOS devices
- and many other attributes
How Do I Embed a 3D Model (GLB)?
KeyShot allows you to export a GLB file that can be used in various ways. This, along with <model-viewer> allows you to embed 3D models on your webpage to allow 3D model viewing on both desktop and mobile browsers, plus AR viewing for supported iOS and Android mobile devices.
What You Need
- A GLB file exported from KeyShot
In KeyShot Pro, go to File, Export, and select Export to GLB/GLTF. If you would like to provide an option to view the model in AR on iOS devices, export a USD file as well using the same method selecting Export, Export to USD. - The <model-viewer> embed code
This is a simple embed code used like any other HTML. Simply add this in the html at the location on your webpage you want to display the 3D model. For more information on use and attributes, please visit modelviewer.dev. As an example, the code used to embed the 3D model on keyshot.com/envoy/:
<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"</script>> <div style="height: 600px; flex: 1; display: flex; justify-content: center; border: 0px; box-sizing: border-box;"><model-viewer style="width: 100%; height: 100%; background-color: #eee;" src="https://media.keyshot.com/scenes/envoy/envoy-opt.glb" ios-src="https://media.keyshot.com/scenes/envoy/envoy.usdz" poster="https://media.keyshot.com/scenes/envoy/envoy-scan.jpg" alt="3D Export from KeyShot" ar-modes="webxr scene-viewer quick-look" ar-scale="auto" ar auto-rotate camera-controls></model-viewer></div>
Notes:
- Replace the src URLs with the corresponding location of your GLB, USD, and Image (jpg, png, gif, etc) files.
- The location of your files must be on the same domain as where you display the 3D model. If your model does not display, please talk with your host or web admin to make sure Cross-Origin Resource Sharing (CORS) is enabled for your site.
To Provide a Single QR Code for both iOS and Android
This can be done with a simple HTML file with header redirects set for various mobile devices/browsers. An example of this file (for the http://keyshot.com/envoy/ page can be downloaded here.
- Upload this file to your web server
- Use a free QR Code Generator to create your QR code using the location of your HTML file as the URL.
To Provide a Single Link for Both iOS and Android
This can be done using a similar web component to <model-viewer>, called <ar-button>, created by Leonardo Cavaletti and available on GitHub.
An example, again from the http://keyshot.com/envoy page is:
<script type="module" src="https://unpkg.com/@leoncvlt/ar-button"></script> <ar-button src="https://media.keyshot.com/scenes/envoy/envoy.glb" ios-src="https://media.keyshot.com/scenes/envoy/envoy.usdz" link="https://manual.keyshot.com/keyshot11/envoy" title="3D view of the Envoy Helmet">Click to view in your space!</ar-button>Device Viewing Requirements
To view models on iOS devices using AR Quick Look:
- An iOS device with iOS 11.0 or later or A9 or later processor.
- USD file size limits: Larger file sizes from complex textures and large images may affect loading times. We recommend under 50MB for best experience.
- See USDZ examples provided by Apple for reference
To view a GLB in AR on Android devices using Scene Viewer, the device must:
- Be an ARCore supported device on Android 7.0 and up
- Have an up to date version of Google Play Services for AR
- Have an up to date version of the Google app
- GLB file size limits: 15MB Max (10MB recommended); 100,000 triangles max, (although files with more triangles below the 15MB threshold may work).
If the above is met, the AR view should appear on the mobile device. If not, it will either download the file, ask to download the file, or (for Android) go to the Google Play Service for AR in the Google Play Store.