Building your first React Native AR Application :

In this section, we will build a simple React Native AR application and render some 3D objects in 360 degree and placed into the real world.

Creact react native project:

Befare create a project set up react native environment. To set up react native environment refer to below given line.

https://reactnative.dev/docs/environment-setup

Open terminal/cmd and create new project with command ‘npx react-native init <your project name>

Install required libraries to set up Ar View:

1) react-native-3d-model-view

This library is use to load 3d model of object and change colors dynamically with textures.

First install this library with ‘yarn add react-native-3d-model-view’ command from terminal/cmd

After library installation open ‘ <project_name> .xcxcworkspace’ file in xcode and create empty swift for arkit swift support

Also go to build settings in xcode and change Swift Language Version to 4.2 or higher

In your app.js file add below code to load 3d model view

import ModelView from ‘react-native-3d-model-view’

< ModelView
  source={{
    model: require('../obj/object_car.obj'),
    texture: require('../obj/object_car_main_Base_Color_grey.png')
  }}
  onLoadModelStart={this.onLoadModelStart}
  onLoadModelSuccess={this.onLoadModelSuccess}
  onLoadModelError={this.onLoadModelError} 
/>

Output :

For more information of this library refer to this link: https://github.com/BonnierNews/react-native-3d-model-view

2) react-native-ar-viewer

AR viewer for react native that uses Sceneform on Android and ARKit on iOS

First install this library with ‘yarn add react-native-ar-viewer’ command from terminal/cmd

Android

Required AR features:

  • Add the following to your AndroidManifest.xml:
    < meta-data android:name=”com.google.ar.core” android:value=”required” tools:replace=”android:value” />
  • If you already have < meta-data android:name=”com.google.ar.core” android:value=”required” /> don’t forget to add the tools:replace=”android:value” attribute.
  • Check that your <manifest> tag contains xmlns:tools=”http://schemas.android.com/tools” attribute.

Ios
  • Remember to add NSCameraUsageDescription entry in your Info.plist with a text explaining why you request camera permission.
  • In XCode file tree, go to Pods > Development pods > react-native-ar-viewer, right-click on “Add Files to Pods”… Then select the environment.skybox folder in your node_modules/react-native-ar-viewer/ios folder. In add file window, check “react-native-ar-viewer-ARViewerBundle”. It should appear with a blue icon on the file tree. Check if res.hdr is present inside, if not, add it manually. It should look like that:
File formats :

The viewer only supports USDZ files for iOS and GLB for Android. Other formats may work, but are not officialy supported.

Example code :
import {ArViewerView} from 'react-native-ar-viewer';

<ArViewerView
         model={localModelPath}
         style={styles.arView}
         disableInstantPlacement
         manageDepth
         allowRotate
         allowScale
         allowTranslate
         onStarted={() => console.log('started')}
         onEnded={() => console.log('ended')}
         onModelPlaced={() => console.log('model displayed')}
         onModelRemoved={() => console.log('model not visible anymore')}
         ref={ref}
/>
Output :

To open ARViewer with respective native code refer to below give link

https://medium.com/@linjunghsuan/a-simple-way-to-use-native-ar-viewer-in-react-native-18304bc6c799

Be First to Comment

LEAVE A COMMENT

Your email address will not be published.