Adding AR/VR Capabilities
Learn how to add AR/VR capabilities to your cloud-connected React Native project.
Last updated
Was this helpful?
Learn how to add AR/VR capabilities to your cloud-connected React Native project.
Last updated
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.
Clone our open-source example project.
Go to the root of the directory.
Run npm install
.
Edit the App.js
script and type in your echo3D API key:
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:
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:
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.
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.