📲Deploy Experience
Learn how to use our system with AR.js.
Last updated
Learn how to use our system with AR.js.
Last updated
AR.js is a free open-source library that enables you to view your 3D content through a web browser and supports features like Image Tracking, Location-based AR, and Marker Tracking.
Add any type of asset through the console. You can choose any type of target. Here's how:
Add ContentYou can also upload your own image trackers file (.iset, .fset, or .fset3) directly when adding content to the console. The resulting Content Entry will be considered as an entry with a Surface target but it will have the image tracker embedded for AR.js experiences. Note that when you upload your own image markers the original image that serves as the real-world target will not be stored.
Once the 3D asset is set you can view it instantly with AR.js.
Click on the icon to generate and show the QR codes. Choose the "See on an Image" tab.
Scan the QR code with your phone's camera app or with a QR reader app.
Latest iOS and Android phones are able to read QR code with their default camera apps.
Click the pop-up message to get redirected to our website. Your browser should open.
You might need to allow camera access. In iOS, we recommend using the Safari browser. In Android, Chrome browser is recommended as the default browser.
Your camera should open in the browser.
Instead of scanning the QR code, you can also browse directly to:
Your camera should open in the browser.
Now that the camera is running in your browser, follow the instructions based on the type of target you chose to upload previously:
Surface detection is not supported for AR.js experiences. Instead, you can use a QR marker.
Keep the camera pointed to the QR code to see the 3D model appear.
Instead of a QR code, you can use your own images or generate image markers for your AR experience by setting an image target. Your content will appear in AR when the original image or image marker is detected in your camera frame.
After uploading your asset with an image target, our system will:
process the image to allow for Natural Feature Tracking (NFT),
convert your image to an image marker.
The image marker is different from the original image and contains a white and black border.
View the original or marker versions of the image by clicking on the image thumbnail on the card.
You also can quickly download the generated image marker to your computer by clicking "Download marker" on the content card.
Seeing your 3D content on the image marker will be available immediately.
Seeing your 3D content on the original image will be available once NFT support is ready. Reload your key or refresh your browser to see if the card shows "Image Tracking Ready".
Another indication that NFT support is ready and that you may use the original image is seeing "Loading, please wait..." before the camera opens.
Keep the camera pointed to the original image or marker to see the 3D content appear.
Location targets have to be very precise since location-based AR.js (GeoAR.js) doesn't have much tolerance for inaccurate locations
Make sure to activate GPS on your phone
Your content will appear only when your device is around the specific location you set.
Instead of scanning the QR code, you can also browse directly to:
Your camera should open in the browser. Look around you to see the 3D model appear.
An image will be captured and saved to your device.
Share it with others! 💗
You can password-protect AR.js experiences so that users that access the experience will be prompted to enter a password.
If you'd like to password-protect the 3D content, go back to the console and add metadata to set a password. After adding metadata, relaunch the experience.
The following key is a word the system uses as pre-defined metadata keys to password-protect content:
| Keyword | Type | Example |
|---|---|---|
passwd | String | 1a2B3c4D5e6 |
You can snap a picture of the AR scene by clicking the button at the bottom of the screen.
