https://github.com/icanb/react-arkit
AR library for React-Native based on ARKit
https://github.com/icanb/react-arkit
arkit augmented-reality react-native react-native-component reactjs swift
Last synced: 5 months ago
JSON representation
AR library for React-Native based on ARKit
- Host: GitHub
- URL: https://github.com/icanb/react-arkit
- Owner: icanb
- License: mit
- Created: 2017-08-09T00:03:18.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-04T20:57:15.000Z (over 7 years ago)
- Last Synced: 2025-01-03T08:07:38.252Z (6 months ago)
- Topics: arkit, augmented-reality, react-native, react-native-component, reactjs, swift
- Language: Swift
- Size: 32.2 KB
- Stars: 59
- Watchers: 7
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# React ARKit
AR library for React-Native, based on ARKit. Makes it super easy to use all the augmented reality features of iOS 11.
##### [Check out the example app using react-arkit](https://github.com/icanb/react-arkit-example)
_iOS Only, until Android comes up with their version of ARKit_
[](https://www.npmjs.com/package/react-arkit)
[](https://www.npmjs.com/package/react-arkit)
Library for create augmented reality applications with JavaScript, using declarative UI components in ReactJS. Allows for any geometric shape, as well as custom 3D models.
## Install
Install the package, inside your React-Native app:
```bash
$ npm install react-arkit --save
```
Link the package to the existing app
```bash
react-native link react-native-arkit
```
Make sure that your app allows camera usage. ([How?](https://github.com/icanb/react-arkit/blob/master/SETUP.md#camera-permissions))
Make sure that your app supports Swift runtime. ([How?](https://github.com/icanb/react-arkit/blob/master/SETUP.md#making-the-project-swift-compatible))
Or just clone the [example app](https://github.com/icanb/react-arkit-example) and make edits on it.
## Usage
Import the ``ARScene`` component, and other node types that you need:
```javascript
import ARScene, { ARBoxNode, ARTextNode, ARNode } from 'react-arkit';
```
Define a scene:
```javascript
{`Other AR nodes`}
```
Add any node in it and manipulate freely:
```javascript
{
console.log("Detected plane:", id);
}}
onPlaneUpdated={({id, alignment, node, center, extent}) => {
console.log("Updated plane:", id);
}}>
```
Refer to the [example app](https://github.com/icanb/react-arkit-example/blob/master/index.ios.js) for more detailed sample implementations.
## [Documentation](DOCUMENTATION.md)
* #### [ARScene](DOCUMENTATION.md#arscene)
Parent object that represents object represents a three-dimensional scene and its contents. (Props: `debugEnabled`, `run`)
* #### [ARNode](DOCUMENTATION.md#arnode)
A structural element of in the 3D coordinate space, representing a position and transform in based on the parent node\scene. Can also represent custom 3d models as well as basic geometric shapes. (Props: `geoposition`, `size`, `color`, `modelAssetPath`)
* ##### [ARBoxNode](DOCUMENTATION.md#arboxnode)
Node that has the box geometry. Subclass of ARNode.
* ##### [ARSphereNode](DOCUMENTATION.md#arspherenode)
Node that has the sphere geometry. Subclass of ARNode.
* ##### [ARTextNode](DOCUMENTATION.md#artextnode)
Node that has the shape of a given text. Subclass of ARNode. (Additional prop: `text`)
## Contributing
Any kind of contributions are very welcome. This library is still very bare-bones and has a lot of room for improvement. Please make sure to read the [Contributing Guide](CONTRIBUTING.md) and feel free to make pull-requests!
For issues or feedback, please create an [Issue](https://github.com/icanb/react-arkit/issues/new). For questions, or help, please get in touch with @icanb.