Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ma22-maker/react-mindar.js-watchdemo
Welcome to the ARComponent demo, a marker-based augmented reality (AR) experience built using MindAR with React. please refer to the https://github.com/ma22-maker/ARWatchAssets for Assets Used in the App.
https://github.com/ma22-maker/react-mindar.js-watchdemo
augmented-reality create-react-app image-recognition marker-tracking mindarjs reactjs three-js
Last synced: 3 months ago
JSON representation
Welcome to the ARComponent demo, a marker-based augmented reality (AR) experience built using MindAR with React. please refer to the https://github.com/ma22-maker/ARWatchAssets for Assets Used in the App.
- Host: GitHub
- URL: https://github.com/ma22-maker/react-mindar.js-watchdemo
- Owner: ma22-maker
- Created: 2024-07-25T12:20:09.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-07-25T14:52:17.000Z (5 months ago)
- Last Synced: 2024-10-11T22:07:02.402Z (3 months ago)
- Topics: augmented-reality, create-react-app, image-recognition, marker-tracking, mindarjs, reactjs, three-js
- Language: JavaScript
- Homepage: https://react-mind-ar-js-wristwatch.vercel.app
- Size: 8.51 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ARComponent with MindAR and React
Welcome to the ARComponent demo, a marker-based augmented reality (AR) experience built using MindAR with React. Dive into the magic of AR by integrating image tracking with 3D models in your web application.
## Features
- **Marker-Based AR Tracking:** Uses MindAR's image tracking capabilities to detect and interact with markers.
- **3D Model Integration:** Load and display 3D models (e.g., a golden watch) in AR.
- **Dynamic Lighting:** Includes ambient and directional lights to enhance the visual experience.
- **Interactive AR Experience:** Feel free to zoom in or out. Once you tap on the 3D model, prepare for some epic sound effects.
## Installation Guide
To get started with this project, follow these steps:
### Prerequisites
- **Node.js**: Ensure you have Node.js installed. You can download it from [nodejs.org](https://nodejs.org/).
### Clone the Repository
1. Clone the repository to your local machine:
```bash
git clone https://github.com/ma22-maker/React-MindAR.JS-WatchDemo.git
cd React-MindAR.JS-WatchDemo
```
### Install Dependencies
2. Navigate to the project directory and install the required dependencies:
```bash
npm install
```
### Start the Development Server
3. Run the development server:
```bash
npm start
```
Open your browser and navigate to `http://localhost:3000` to view the application.
## Marker Image
To test the AR functionality, you will need a marker image. Download the marker image from the following link:
- [Download Marker Image](https://cdn.jsdelivr.net/gh/ma22-maker/ARWatchAssets@main/wp10826527-ben-10-cartoon-wallpapers.jpg)
Print or display this marker image on your screen. Point your device’s camera at the marker to see the AR experience come to life.
## How to Use
1. **Open the Application:** Open the URL `http://localhost:3000` in your browser.
2. **Display the Marker:** Print or display the marker image on a screen.
3. **Interact with AR:** Point your device's camera at the marker image. You should see a 3D model of a golden watch appear in AR.
4. **Enjoy:** Feel free to interact with the AR experience. Zoom in or out to get a better view of the 3D model.
## Pro Tip
For the best experience, open the URL on your mobile device and use it to view the AR content. This allows for a more immersive experience.
## Contribution
Feel free to contribute to the project by submitting issues or pull requests. Your feedback and improvements are welcome!
---
**Enjoy exploring the AR magic!** ✨📲