This is a 'pokemon' style AR app written using React Native.
Use this as a template / guide, for building your own AR apps using React Native and Three.js.
It consists of Video passthrough, RN-openCV component, webView/webGL, and React-Native !
You'll likely want to run this on a device so the camera actually works.
- Clone the repo
npm install- Run on iOS
- Run on Android
- The video feed is fed into openCV, which detects the {position, directionVector and scale} of a QR-code.
- The {result} is fed into a wkWebView via the javascript bridge.
- The webView renders the 3D creature using three.js/webGL at the given {position, direction and scale}.
- The webView canvas is overlayed over the live-camera canvas, using a transparent background.
- chapter 2. Mastering OpenCV with Practical Computer Vision Projects [pdf]
- example code: book/ chapter2/ src/