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.

Clone the Repository

1. Clone the repository to your local machine:

   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:

   npm install
   

Start the Development Server

3. Run the development server:

   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

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! ✨📲