How to build an interactive AR app in 5 mins w/ React Native & Viro AR

Danny Moon

5 min read

·

Oct 12, 2017

--

2

Listen

Share

With the recent launch of iOS 11 and ARKit, there has been an influx of new AR applications in the iOS app store. Developers are flocking to this new computing paradigm to build the next great app. This article will show you how to build your first AR app using Viro AR and React Native.

**If this is your first time as a Viro developer, use our Quick Start guide to get setup with Viro before continuing with this tutorial. Viro is free and easy to set up!**

This tutorial is a step by step guide for developing an interactive AR app. Our goal by the end of this tutorial is to:

1. Add a 3D Object (Smiley Emoji) to the scene
2. Detect planes
3. Place the Emoji on the plane
4. Make the Emoji draggable in the real world

PREREQUISITES

1. OSX computer
2. iOS Device with A9 chip or higher and running iOS 11
3. Viro AR -> Quick Start guide for setting up Viro
4. Assets for this tutorial (DOWNLOAD) -> click on link to download assets, unzip the file and replace the res folder at <path_to>/ViroSample/js/.

Starting with HelloWorldSceneAR.js

Open your test project in the Viro Media App (like you did in the Quick Start guide) and select the AR option. You should see “Initializing AR…” then “Hello World” in your camera view as shown below:

Zoom image will be displayed

Adding a 3D Object to the scene

Now let’s add a 3D Object to the scene. Replace the code in your HelloWorldSceneAR.js file by copy and pasting the code. (We will explain what we are doing with the code below.)

Save your file and reload your testbed app. You should see a smiley face emoji in front of you with text above it.

Zoom image will be displayed

In our new code, we modified ViroText by changing its scale so that “Hello World” is smaller and changing its position so that it is no longer in the center of the view.

Next, we added lighting to our scene (lines 30–31). Lighting is required to make objects visible. (Read our guide on Lighting and Materials to learn more about how lighting can enhance your scene.)

Last, we placed our Smiley Emoji in the scene by adding a Viro3DObject (lines 33–39). The emoji is a FBX file (converted to VRX format) that we position and scale so it fits in our scene. You can walk around the emoji and it will stay fixed at its position relative to the world.

dragType="FixedDistance" onDrag={()=>{}}

In line 38, we enabled the ability to drag the object with your finger. Use your finger to move the emoji around. The emoji will always move at a fixed distance from the camera (i.e. your device).

Detecting Planes

One method for placing objects in the real world is by placing it on a plane. We can use either ViroARPlane or ViroARPlaneSelector component to accomplish this. When the AR system detects a plane, the Viro platform attempts to attach it to any declared ViroARPlane components and continually keeps the virtual plane anchored to the detected real-world plane. On the other hand, the ViroARPlaneSelector component enables developers to allow their users to select the plane that they want the developer to use.

Let’s use ViroARPlaneSelector. Paste the following code right aboveViro3DObject in your scene.

<ViroARPlaneSelector />

Save your file and reload the testbed app. In addition to the previous scene, you should now see planes appear as you move around your room. In our real world, both the table and floor plane were detected as shown below:

If you try “selecting” a plane by tapping on it, they will simply all disappear as nothing was added within the ViroARPlaneSelector, in the next section, we'll show you how to add a component to it.

Place the Emoji on the Plane

Previously, when we added our emoji to the scene, it was at a fixed position {[0, 0, -1]}, one meter away from the camera, in front of you.

With AR, we often times want objects to be placed in relation to the real world. Using the planes we identified earlier, let’s place our emoji on a plane. Place the Viro3DObject code within ViroARPlaneSelector. The modified code should look like this:

<ViroARPlaneSelector>
  <Viro3DObject
    source={require('./res/emoji_smile/emoji_smile.vrx')}
    position={[0, .1, 0]}
    scale={[.2, .2, .2]}
    type="VRX"
    dragType="FixedDistance" onDrag={()=>{}} />
</ViroARPlaneSelector>

Save the file and reload the testbed app. Now that we have placed the 3D Object inside the ViroARPlaneSelector, when a plane is tapped, the emoji will be placed on the selected plane and the planes will disappear.

Move 3D Object in Real World

To make our emoji drag along real-world surfaces, we need to replace ViroARPlaneSelector with a ViroNode, set the dragType to "FixedToWorld", and add an empty anonymous function to let the platform know that we want this object to drag. Copy and paste the code below replacing: <ViroARPlaneSelector> … </ViroARPlaneSelector>

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

Save your file and reload the testbed app. The emoji should appear right in front of you. Drag the emoji towards a plane, notice how it moves along real world surfaces. (Make sure to scan the room to give ARKit a chance to identify planes so the emoji can be moved along it.)

Next Steps

You should now have a basic interactive AR app (final code posted below). Check out our Code Samples for other AR examples or continuing adding functionality to this scene. For example:

• Add snow or fireworks to your scene. Check out our Particle Emitters Sample Code and read our Particle Effects Guide for info on how to accomplish this.
• Try adding a shadow to the emoji. Check out the Lighting and Materials guide for details.

Final Code