Developing AR Experiences on React

/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
brew install node
yum install watchman
npm install -g react-native-cli
npm install -g react-viro-cli
npm install -g react-viro-cli

Generate a new project

Now that all of that is set up the first thing we want to do is create a new Viro project. Viro has already created in their repo a sample project which you can clone down by using the following command. You must always start your viro projects with react viro init + project name

react-viro init ViroSample

Download the Viro app

Run NPM Start

From the newly created project directory run npm start and the package server will be displayed to you with a specific IP address meant to be put into the app. In the below image you will see the output of my terminal response after typing in NPM Start

Open the Viro App And Enter End Point

Use the same endpoint that was outputting to you in the terminal and tap go. Once you hit go the AR experience will initialize and it will bring you to a section where you can choose to move forward with either

Hello World!

If you set everything up properly, open launching the server, your iOS’s camera should open up and you should see the text “Hello World” superimposed on your space.

Adding Components

Since this is React, we know that components are an integral part of the development environment, and Viro AR is no exception. We are going to start by adding a box, to do so we need to start by import Viro Box and ViroMaterials in to react —

./HelloWorldSceneAR.jsimport {
...
ViroBox,
ViroMaterials,
} from 'react-viro';
<ViroBox position={[0, -.5, -1]} scale={[.3, .3, .1]} materials={["grid"]} />

Adding material to the box

Since we already defined viro materials in our components we can easily style our component by adding the following code after the styles decleration

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

Let’s add some 3D objects to the scene

In order to use 3D objects you need to import components Viro3DObject, ViroAmbientLight and ViroSpotLight.

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

Lastly, create an AR Plane

For it to be AR It needs to be positioned well in space, and Viro offers a great solution. In order to do so import ViroARPlaneSelector into the import statement of your react app. And next add the following code into your ViroARPlaneSelector

<ViroARPlaneSelector />

--

--

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