Developing AR Experiences on React

Leveraging React Native and Viro

To get started, make sure you have Homebrew, Node and Watchman installed. Thank you viro for your documentation and quick start guides which you can find here, I recommend you check those out after reading through this blogpost

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

homebrew install command

brew install node

node install command

yum install watchman

install watchman

npm install -g react-native-cli

install the react command line interface

npm install -g react-viro-cli

install the Viro Command Line Interface

npm install -g react-viro-cli

Generate a new project

react-viro init ViroSample

Download the Viro app

Here’s the link to download the app, it allows you to test out your mobile experience as you are developing. Unike typical iPhone apps, AR, requires the use of the phones camera so you can’t use the xCode simulator. So downloading the app here is a crucial step.

Run NPM Start

Open the Viro App And Enter End Point

Hello World!

Now to take it up a notch lets add a few more objects and environment tracking, so we can make a real augmented reality experience.

Adding Components

./HelloWorldSceneAR.jsimport {
...
ViroBox,
ViroMaterials,
} from 'react-viro';

and next, we'll create a box under the ViroText component

<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} />

We need to make sure to set the position and scale of the box, to fit within our environment and look well placed next to the text

Adding material to the box

ViroMaterials.createMaterials({   grid: {     diffuseTexture: require('./res/grid_bg.jpg'),
},
});

Once you save and reload the app you should see a pink and grey cube appear on the screen directly under the hello world!

If you want to restart your server and see your app run again, you can shake your phone and tap reload, which will reload your server.

Let’s add some 3D objects to the scene

Add the following to your import statement

import {
...
Viro3DObject,
ViroAmbientLight,
ViroSpotLight,
} from 'react-viro';

Once your done importing create a new Viro3DObject

<Viro3DObject source={require('./res/emoji_smile/emoji_smile.vrx')}            position={[-.5, .5, -1]} scale={[.2, .2, .2]} type="VRX" />

Position the object in space, give it a scale and specify the type — note their are a lot of different object types, and they are all handled differently in viro. For more information on 3D objects, view this doc

Lastly, create an AR Plane

<ViroARPlaneSelector />

In order to nest the objects in space into the ViroPlane you just wrap the object into the ViroARPlane Selector. And now your all set with a ‘working’ augmented reality project using react.

Here’s a quick demo of your final outcome!

Hope you enjoyed

Designer, Developer, Musician.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store