Now that you are able to successfully stream 3D content into React Native and know how to make custom adjustments, its time to add AR capabilities to your project.
Viro Media provide a framework built for AR/VR development called ViroReact. It allows you to add AR/VR capabilities to your React Native app for devices that supports ARKit (AR for iOS), ARCore (AR for Android), or Cardboard (VR for iOS and Android).
Clone our open-source React Native + Viro + echoAR example project.
Go to the root of the directory.
App.js script and type in your echoAR API key:
/** TODO: Add your API key below!!*/var API_KEY = "<YOUR_API_KEY_HERE>";
2. Set the environment variable
$ANDROID_HOME and added platform-tools to
export ANDROID_HOME=/YOUR_PATH_TO/Android/sdkexport PATH=$ANDROID_HOME/platform-tools:$PATHexport PATH=$ANDROID_HOME/tools:$PATH
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 android app by executing the following from the root of the project:
react-native run-android --variant=gvrDebug
1. Open ViroSample.xcworkspace under the
ios/ directory in Xcode. Select the right "Team" for
ViroSampleTest target under
General -> Signing.
2. Hit play to build and launch the app on your iOS device.
First, add a 3D model to the console.
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! 🎉