react-native-arkit


项目主页    by: HippoAR     Star:    Fork:     

react-native-arkit

npm version npm downloads

React Native binding for iOS ARKit.

Tutorial: How to make an ARKit app in 5 minutes using React Native

Note: ARKit is only supported by devices with A9 or later processors (iPhone 6s/7/SE, iPad 2017/Pro) on iOS 11 beta. You also need Xcode 9 beta to build the project.

Getting started

$ npm install react-native-arkit --save

Mostly automatic installation

$ react-native link react-native-arkit

Manual installation

iOS

  1. In XCode, in the project navigator, right click LibrariesAdd Files to [your project's name]
  2. Go to node_modulesreact-native-arkit and add RCTARKit.xcodeproj
  3. In XCode, in the project navigator, select your project. Add libRCTARKit.a to your project's Build PhasesLink Binary With Libraries
  4. Run your project (Cmd+R)<

Usage

A simple sample React Native ARKit App

// index.ios.js

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';
import ARKit from 'react-native-arkit';

export default class ReactNativeARKit extends Component {
  componentDidMount() {
    // Add a cube in the scene. Only support cube geometry at the moment
    this.arkit.addBox({ x: 0, y: 0, z: 0, width: 0.1, height: 0.1, length: 0.1, chamfer: 0.01 });
    this.arkit.addSphere({ x: 0.2, y: 0, z: 0, radius: 0.05 });
    this.arkit.addCylinder({ x: 0.4, y: 0, z: 0, radius: 0.05, height: 0.1 });
    this.arkit.addCone({ x: 0, y: 0.2, z: 0, topR: 0, bottomR: 0.05, height: 0.1 });
    this.arkit.addPyramid({ x: 0.2, y: 0.15, z: 0, width: 0.1, height: 0.1, length: 0.1 });
    this.arkit.addTube({ x: 0.4, y: 0.2, z: 0, innerR: 0.03, outerR: 0.05, height: 0.1 });
    this.arkit.addTorus({ x: 0, y: 0.4, z: 0, ringR: 0.06, pipeR: 0.02 });
    this.arkit.addCapsule({ x: 0.2, y: 0.4, z: 0, capR: 0.02, height: 0.06 });
    this.arkit.addPlane({ x: 0.4, y: 0.4, z: 0, width: 0.1, height: 0.1 });
  }

  render() {
    return (
      <View style={{ flex: 1 }}>
        <ARKit
          ref={arkit => this.arkit = arkit}
          style={{ flex: 1 }}
          debug
          planeDetection
          lightEstimation
          onPlaneDetected={console.log} // event listener for plane detection
          onPlaneUpdate={console.log} // event listener for plane update
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('ReactNativeARKit', () => ReactNativeARKit);

Props

Prop Type Default Note
debug Boolean false Debug mode will show the 3D axis and feature points detected.
planeDetection Boolean false ARKit plane detection.
lightEstimation Boolean false ARKit light estimation.

Events

Event Name Returns Notes
onPlaneDetected { id, center, extent } When a plane is first detected.
onPlaneUpdate { id, center, extent } When a detected plane is updated

Instance methods

Method Name Arguments Notes
snapshot Take a screenshot (will save to Photo Library)
getCameraPosition Get the current position of the ARCamera
addBox { x, y, z, width, height, length, chamfer } Add a SCNCube
addSphere { x, y, z, radius } Add a SCNSphere
addCylinder { x, y, z, radius, height } Add a SCNCylinder
addCone { x, y, z, topR, bottomR, height } Add a SCNCone
addPyramid { x, y, z, width, length, height } Add a SCNPyramid
addTube { x, y, z, innerR, outerR, height } Add a SCNTube
addTorus { x, y, z, ringR, pipeR } Add a SCNTorus
addCapsule { x, y, z, capR, height } Add a SCNCapsule
addPlane { x, y, z, width, length } Add a SCNPlane

Contributing

If you find a bug or would like to request a new feature, just open an issue. Your contributions are always welcome! Submit a pull request and see CONTRIBUTING.md for guidelines.

相关文章