Skip to main content

3D Viewer

npm version

You have two options for web integrations. The first option provides both a 3D view and an AR button, while the second option goes directly into AR inside the phone camera.

For the time being, AR is only available on mobile devices because it requires a back camera to operate. In both options; when users try to open AR on the desktop, a popup window guides the user to their phone with a QR code.

1: Viewer & AR SDK​

bundle size

Install​

The <meshkraft-viewer> web component can be used directly from various free CDNs such as unpkg.com

You'll need to paste script code before closing </body> tag of your web page

<script
  type="module"
  src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-viewer.min.js"
  data-meshkraft-key="YOUR_API_KEY"
></script>
caution

Make sure to replace YOUR_API_KEY with your API key.

Usage​

After initialized, on a specific product page, call SDK with product identifier. (SKU)

<meshkraft-viewer sku="YOUR_SKU" />

SDK will do the rest.

Options​

NameDefaultDescription
skurequiredSKU of your product. Identifier for 3D assets.
width100%CSS width of parent component. Accepts px, em, rem, vw
height300pxCSS height of parent component. Accepts px, vh, vw
revealautoDetermines when to load and reveal 3D model. Values;
auto As soon as model loaded.
interaction Reveals model after first user interaction
manual the model will remain hidden until dismissPoster() is called.
auto-rotatetrueShould model rotate automatically
show-dimensionsfalseShould show the dimensions of model in centimeters.
show-bannerfalseShould show a banner with Add to Cart button in iOS AR
banner-typedefaultType of iOS AR banner. Possible values are default, custom and apple-pay. Apple Pay includes an checkout with Apple Pay button.
extranullExtra product information such as price, description to be displayed in AR banner. Required if show-banner enabled
extranullExtra product information such as price, description to be displayed in AR banner. Required if show-banner enabled
disable-arfalseDisables AR mode, hides View in AR button
disable-zoomfalseDisables model zooming

Methods​

NameDescription
dismissPosterMeant to use with reveal='manual'. Dismisses the poster image and loads 3D model

Example;

const meshkraftViewer = document.getElementById('meshkraft-viewer');
meshkraftViewer.dismissPoster();

Events​

Some events can be listened to. You can register an event listener using addEventListener method.

Added to Cart​

When user clicks the Add to Cart button in AR banner, this event will be fired with SKU.

const meshkraftElement = document.querySelector('meshkraft-viewer');
meshkraftElement.addEventListener('add-to-cart', (e) => {
  // Add product to cart
  console.log(e.detail.sku);
});

Full Example​

<head>
  <script
    type="module"
    src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-viewer.min.js"
    data-meshkraft-key="YOUR_API_KEY"
  ></script>
</head>

<body>
  <meshkraft-viewer
    sku="Nike-Air-Max-90"
    height="500px"
    show-banner
    banner-type="default"
    extra='{"price": "$500", "description":"White, Essential"}'
  ></meshkraft-viewer>
</body>

<script>
  const meshkraftElement = document.querySelector('meshkraft-viewer');
  meshkraftElement.addEventListener('add-to-cart', (e) => {
    console.log('Product added to cart :: ', e.detail.sku);
  });
</script>

2: AR SDK​

bundle size

Install​

You'll need to paste script code before closing </body> tag of your web page

<script
  type="module"
  src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-ar.min.js"
></script>

Basic Usage​

manually start AR session within your javascript. SDK exposes an object meshkraftAR with some useful methods in it.

// init function to pass token and config
meshkraftAR.init({
  token: 'YOUR_API_KEY',
  // config is optional
  config: {
    showBanner: true,
    title: 'Nike Air Max 90',
    subtitle: 'White/White/White',
    price: '90$',
  },
});

// to start AR session in mobile or show QR code in desktop
meshkraftAR.startAR('YOUR_SKU');

// to listen SDK events
meshkraftAR.addEventListener('add-to-cart', (event) => {
  console.log('SKU added to cart within AR', event.detail.sku);
});
caution

Make sure to replace YOUR_API_KEY with your API key.

Config​

Possible values are;
showBanner - Boolean. Should show banner or not. Default is false
price - String. Price tag for the banner.
title - String. Title for the banner.
subtitle - String. Subtitle for the banner.

Events​

Some events can be listened to. You can register an event listener by getting element and invoking addEventListener method.

Added to Cart​

When user clicks the Add to Cart button in AR banner, this event will be fired with SKU.

meshkraftAR.addEventListener('add-to-cart', (e) => {
  // Product added to cart
  console.log(e.detail.sku);
});

Full Example​

<head>
  <script
    type="module"
    src="https://unpkg.com/meshkraft-viewer/dist/meshkraft-ar.min.js"
  ></script>
</head>

<script>
  meshkraftAR.init({
    token: 'YOUR_API_KEY',
    config: {
      showBanner: true,
      title: 'Nike Air Max 90',
      subtitle: 'White/White/White',
      price: '90$',
    },
  });

  meshkraftAR.addEventListener('add-to-cart', (event) => {
    console.log('SKU added to cart within AR', event.detail.sku);
  });

  meshkraftAR.startAR('YOUR_SKU');
</script>

Bundle Size​

bundle size

You'll be consuming minified and Gzipped or Brotli compressed versions, depending on the browser.

Bundle Size​

bundle size

You'll be consuming minified and Gzipped or Brotli compressed versions, depending on the browser. Network impact of bringing AR experience to your website will be around 177kb and 218kb 🎉

Desktop Behavior​

As AR technology is only available on mobile devices, users on a desktop will need to be guided to their mobile devices. Both SDK's will do that for you on a desktop browser, using a runtime-generated QR code and a guidance popup.