A-Frame

Universal AR

Our A-Frame library allows you to use Zappar's best-in-class AR technology with content built using the aforementioned 3D rendering platform.

Installation

You can use this library by downloading a standalone zip containing the necessary files, by linking to our CDN, or by installing from NPM for use in a webpack project.

You can find the respective download links and installation instructions here.

Standalone Download

Once downloaded, unzip into your web project and reference from your HTML like this:

<script src="zappar-aframe.js"></script>

CDN

You can reference the zappar.js library from your HTML like this:

<script src="https://libs.zappar.com/zappar-aframe/*/zappar-aframe.js"></script>

* Version number can be found on the Downloads and SDKs page.

NPM Webpack Module

Run the following NPM command inside your project directory:

npm install --save @zappar/zappar-aframe

Then import the library into your JavaScript or TypeScript files:

import * as ZapparAFrame from "@zappar/zappar-aframe";

The final step is to add this necessary entry to your webpack rules:

module.exports = {
  //...
  module: {
    rules: [
      //...
      {
        test: /zcv\.wasm$/,
        type: "javascript/auto",
        loader: "file-loader"
      }
      //...
    ]
  }
};

Usage

You can integrate the Zappar library with an existing A-Frame scene. A typical project may look like this. The remainder of this document goes into more detail about each of the component elements of this example.

<body>
      <a-scene>
          <a-assets>
              <a-asset-item id="target-file" src="myTarget.zpt"/>
          </a-assets>

          <a-entity camera zappar-camera></a-entity>

          <a-entity zappar-image="#target-file">
              <!-- YOUR 3D CONTENT GOES HERE -->
          </a-entity>
      </a-scene>
  </body>