Page Comparison

...

Code Block

language	js

const url = await pregenerated.getGlb(sku, LOD._1024);

...

Launching a Product from a QR Code

Although spins of a GLB asset are possible on desktop, launching into AR is only supported on Mobile.

It is a common path therefore on desktop, to show a “View in AR” capability, but have it show a QR code to scan on a mobile device.

Creating a QR Code

Here is an example of this using the QRious library, though any QR Code library will do.

Code Block

<div id="qr-modal" class="modal" style="display:none;" >
   <div class="modal-content">
      <div class="close">&times;</div>
      <h3>Viewing your products in AR</h3>
      <p class="subtext">Scan this QR code with your mobile device's camera to view this product in AR.</p>
      <div id="qr-url"></div>
      <canvas id="qr" class="qr"></canvas>
   </div>
</div>
<script>
   var qr = new QRious({
       size: 500,
       element: document.getElementById('qr'),
   // Remember to make sure the value for the QR code url is absolute, not relative, since the QR will be generated based on this text.
   // This should direct to the location of the "AR Launch page" detailed below in the documentation
       value: "https://exampledomain.com/demo/web-ar/sdk-qr.html" + "?sku=" + sku + "&lod=" + lod
   });
</script>

AR Launch Page

This is an example of a page to be written onto your domain. This is the page that will launch of a phone that can in turn launch AR immediately to the user.

This technique gives you a handle for doing any in between steps since this is the first moment launching onto a user’s device.

Code Block

<html><head>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="icon" type="image/x-icon" href="https://cms.3dcloud.io/assets/images/favicon.ico">
    <link rel="stylesheet" media="screen" href="css/style.css">
    <script src="https://cdn.3dcloud.io/mxt-ar-sdk/7.5.0/MxtWebAR-#.#.#.min.js"></script>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async="" src="https://www.googletagmanager.com/gtag/js?id=G-211KTZXPL6"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'G-211KTZXPL6');
    </script>
</head>

<body>
  <div id="loading" style="display: block; margin: 20vh 20vw; text-align: center;">This product is not yet available in AR.  Please try a different product.</div>
  <a href="#" id="mainButton" style="display:none;" class="btn" rel="ar"><img src="" width="0" height="0">View In Your Home</a>

  <script type="text/javascript">
        const urlParams = new URLSearchParams(window.location.search);
        const sku = urlParams.get('sku');
        const anchorElement = document.getElementById('mainButton');
        
        const myApiKey = myApiKey
        const myClientId = myClientId
        
        // Get the approproate AR asset for the user's device and redirect the browser to that file.
        async function launchAr() {
            try {
                const pregenerated = new MxtWebAR.MxtWebArPregenerated({apiKey: myApiKey, clientId: myClientId });
                const url = await pregenerated.getWebArPregeneratedUrl(sku);
            // Set the AR button href to the AR file url
                document.getElementById("mainButton").href = url
            // Simulate click of the AR button to launch directly into AR.  IMPORTANT - This step prevents iOS from taking a user to the placeholder image/poster.  
            // This provides the best user experience from a QR code
                document.getElementById("mainButton").click();
            } catch(e) {
                console.error('Failed to get sku web ar asset', e);
                document.getElementById("loading").innerHTML = "This product is not yet available in AR.  Please try a different product."
                return false;
            }
        }
        launchAr();
  </script>


</body></html>

Versions Compared

Old Version 20

New Version 21

Key

Launching a Product from a QR Code