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
  • 1. Setup a Simple AR Application
  • 2. Set your API Key
  • 3. Build and Run the AR Application
  • 4. Use your AR Application

Was this helpful?

  1. React Native

Adding AR/VR Capabilities

Learn how to add AR/VR capabilities to your cloud-connected React Native project.

PreviousEdit CodeNextTransforming Content

Last updated 1 year ago

Was this helpful?

Now that you are able to successfully stream 3D content into React Native and know how to make custom adjustments, it's time to add AR capabilities to your project.

provides a framework built for AR/VR development called . It allows you to add AR/VR capabilities to your React Native app for devices that support (AR for iOS), (AR for Android), or (VR for iOS and Android).

Viro libraries are now open-sourced and no longer maintained by Viro Media.

1. Setup a Simple AR Application

Clone our open-source example project.

Go to the root of the directory.

Run npm install.

2. Set your API Key

Edit the App.js script and type in your echo3D API key:

/*
 * TODO: Add your API key below!!
 */
 var API_KEY = "<YOUR_API_KEY_HERE>";

3. Build and Run the AR Application

Android

1. Make sure you download the and for building Android apps.

2. Set the environment variable $ANDROID_HOME and added platform-tools to $PATH variable.

In Linux/Mac:

export ANDROID_HOME=/YOUR_PATH_TO/Android/sdk
export PATH=$ANDROID_HOME/platform-tools:$PATH
export PATH=$ANDROID_HOME/tools:$PATH

In Windows:

  • Right-click the Computer icon and choose Properties, or in Windows Control Panel, choose System.

  • Choose Advanced system settings.

  • On the Advanced tab, click Environment Variables.

  • Click New to create a new environment variable.

  • Click Edit to modify an existing environment variable.

  • After creating or modifying the environment variable, click Apply and then OK to have the change take effect.

3. Build and launch the Android app by executing the following from the root of the project:

react-native run-android --variant=gvrDebug

iOS

1. Open ViroSample.xcworkspace under the ios/ directory in Xcode. Select the right "Team" for ViroSample and ViroSampleTest target under General -> Signing.

2. Hit play to build and launch the app on your iOS device.

4. Use your AR Application

When the application is loaded on your mobile device, you might be asked to approve camera access permission.

Move the phone around and tap the screen to place the model on the surface.

The model will steam and render in front of you.

You did it! 🎉

First, to the console.

If the model is too big or too small, go back to the console and to affect its scale. After adding metadata, the model should change automatically.

🤳
Viro Media
ViroReact
ARKit
ARCore
Cardboard
React Native + Viro + echo3D
Android SDK
platform-tools
add a 3D model
add metadata