πŸ“²Deploy Experience

Learn how to use our system with AR.js.

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.

Adding 3D Content

Add any type of asset through the console. You can choose any type of target. Here's how:

pageHow to Add Content

You 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.

Launching the AR.js App

Option 1: Scan a QR code

Once the 3D asset is set you can view it instantly with AR.js.

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.

Option 2: Go directly to website

Instead of scanning the QR code, you can also browse directly to:

https://api.echo3D.com/arjs?key=<YOUR_API_KEY>

Your camera should open in the browser.

Seeing 3D Content in AR

Now that the camera is running in your browser, follow the instructions based on the type of target you chose to upload previously:

Surface Target

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.

Image Target

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:

  1. process the image to allow for Natural Feature Tracking (NFT),

  2. 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 Target

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:

https://api.echo3D.com/geoarjs?key=<YOUR_API_KEY>&entry=<ENTRY_ID>

Your camera should open in the browser. Look around you to see the 3D model appear.

Capturing the AR Moment

An image will be captured and saved to your device.

Share it with others! πŸ’—

Password-Protecting Content

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:

KeywordTypeExample

passwd

String

1a2B3c4D5e6

Last updated