A-Frame
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>
You may also be interested in:
- Zappar for ThreeJS
- Zappar for JavaScript
- ZapWorks Studio, a full 3D development environment built for AR, VR and MR.