ReactAR

How would you react to images coming to life? ✨ React port of EnchantAR.

HOWTO

• Open this image on any screen: Image
• Open this app on your phone and scan the screen where you have the image open: Webapp
• Watch ReactAR react to images! ✨

DEMO

ReactAR.Demo.mp4

CREDITS

• Deploying a React App (created using create-react-app) to GitHub Pages
• Deploying React Apps to GitHub Pages on Master Branch — Creating a “User Site”
• This project was bootstrapped with Create React App
• How to convert any web page into a React web page
• Derived from AR.js's NFT example
• Developed using AR.js and three.js
• Animated 3D model from Phoenix bird by Norberto Aguilera
• Image marker derived from Phoenix of Autumn by AlviaAlcedo
• GLTF to GLB conversion with GLB Packer
• Image to nft marker conversion using NFT Marker Creator

Local Development

To run the application locally for development:

1. Install dependencies:

   npm install

2. Start the development server:

   npm start

   The app will open automatically at http://localhost:3000. The page will reload if you make edits.

Production Build

To ensure the application builds correctly for the server, you can generate and run a production build locally:

1. Build the app for production:

   npm run build

   This optimizes the app and bundles it into the build folder.

2. Serve the production build: You can use npx serve to serve the static files:

   npx serve --single build

   Then open the provided local address (usually http://localhost:3000) in your browser to view the production build.

LICENSE

Except where otherwise noted, all original content here are released under MIT license. However, part of the work here are derived from other open source projects and as a result follow the licenses of their original sources.