echo3D
🌐 Back to website💻 Go to console📺 Watch workshop💬 Discuss on Slack
  • Introduction
  • Quickstart
    • 🔑Register
    • 💻Access the Console
    • 🎲Add a 3D Asset
    • 📤Share it with Others
    • ❔Troubleshooting
  • Web Console
    • 📦Load a Collection
    • 💼Manage Pages
      • Content Page
        • Assets and Targets
        • Add Content
        • Edit Content
        • Share Content
        • Access Permissions
        • Version Control
        • Asset Hierarchy
        • Bulk Actions on Assets
        • Asset Commenting
        • Activity Sidebar
      • Metadata & Tags Page
        • Collection Taxonomy and Asset Specific Metadata
        • How to Add and Edit Metadata
        • How to Add Associated Files and Text
      • Collections and Sharing Page
        • Users Tab
        • Groups Tab
        • Collections
        • Collection Sharing Tab
        • Asset Sharing Tab
        • Security Tab
      • Customizer Page
      • Model Editor Page
      • Scene Editor Page
    • 🚚Deliver Pages
      • Locations Page
      • Users Page
      • Insights Page
    • 🕛Optimize Pages
      • Convert & Compress Page
    • 🎓Learn Pages
      • Tutorials Page
    • 👤Account Page
      • Profile Tab
      • Email & Password
      • Plans Tab
      • Credit Usage Tab
      • Notifications Tab
      • Delete Account Tab
    • ❓Help Menu
    • ⏬Downloads
    • 🎨Themes
    • 🔎Search
  • API
    • 🧩Objects
    • 🗨️Queries
    • 📊Data
      • 📑What Metadata is Stored
    • 🔼Upload
    • 🔽Download
    • ❌Delete
    • 🌳Entry Hierarchy
    • 🔄Convert
    • 🔃Compress
    • 📁Organize
    • ⏪Version
    • ⏬Locate
    • 🔎Search
    • 🖼️Search by Image or Model
    • Share Content
  • Unity
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Script Settings
    • 📐Transforming Content
    • 👩‍💻Edit Code
    • 🤳Adding AR Capabilities
    • ❔Troubleshooting
  • Unreal 4
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Demo Project
  • Web
    • 🔨Installation
    • 🧰Using the Package
  • Scene Viewer
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • 👩‍💻Add Code
    • ❔Troubleshooting
  • AR.js
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • ❔Troubleshooting
  • FaceAR
    • 📲Deploy Experience
    • 📐Transforming Content
    • 🔢Embed into Website or App
    • ❔Troubleshooting
  • React Native
    • 📩Fetching Data
    • 👩‍💻Edit Code
    • 🤳Adding AR/VR Capabilities
    • 📐Transforming Content
  • Swift
    • 🔨Installation
    • 🔢Displaying a Model Asset
    • 🤳Adding AR Capabilities
    • 🧰Using the SDK
  • Flutter
    • 🔨Installation
    • 👩‍💻Edit Code
    • 🤳Adding AR Capabilities
  • JavaScript
    • 🔨Installation
    • 🧰Using the SDK
    • 📩Fetching Data
    • 👩‍💻Edit Code
  • Python
    • 🔨Installation
    • 🧰Using the SDK
    • 🔧Demo Project
  • NVIDIA Omniverse
    • 🔨Installation
  • Adobe Substance 3D Painter
    • 🔨Installation
  • 🧰Using the Plugin
  • Blender
    • 🔨Installation
    • 🧰Using the Add-on
  • eCommerce Sites
    • 🛒Shopify
    • 🌐Wix
  • 3D Content
    • 🎨Content Creation
    • 💎Google Poly
    • 📦Objaverse
    • 💫3D Capture Apps
      • MagiScan
      • Qlone
      • ARitize360
      • SCANN3D
      • 3D Scanner
      • Didimo Xperience
      • Scaniverse
      • Metascan3D
      • Polycam3D
      • RealityScan
Powered by GitBook
On this page
  • Adding 3D Content
  • Launching the AR.js App
  • Option 1: Scan a QR code
  • Option 2: Go directly to website
  • Seeing 3D Content in AR
  • Surface Target
  • Image Target
  • Capturing the AR Moment
  • Password-Protecting Content

Was this helpful?

  1. AR.js

Deploy Experience

Learn how to use our system with AR.js.

PreviousTroubleshootingNextTransforming Content

Last updated 1 month ago

Was this helpful?

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:

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.

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.

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.

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.

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.

If you'd like to password-protect the 3D content, go back to the console and to set a password. After adding metadata, .

📲
AR.js
Add Content
relaunch the experience
add metadata