Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shwetkhatri2001/ar-webstore
Webstore built to showcase photorealistic 3D digital objects in AR
https://github.com/shwetkhatri2001/ar-webstore
augmented-reality gssoc23 open-source threejs virtual-try-on webxr
Last synced: 4 days ago
JSON representation
Webstore built to showcase photorealistic 3D digital objects in AR
- Host: GitHub
- URL: https://github.com/shwetkhatri2001/ar-webstore
- Owner: ShwetKhatri2001
- License: mit
- Created: 2023-02-21T13:33:40.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2024-05-10T15:46:34.000Z (8 months ago)
- Last Synced: 2024-12-17T21:07:37.363Z (18 days ago)
- Topics: augmented-reality, gssoc23, open-source, threejs, virtual-try-on, webxr
- Language: JavaScript
- Homepage: https://ar-webstore.netlify.app/
- Size: 73.3 MB
- Stars: 62
- Watchers: 1
- Forks: 113
- Open Issues: 22
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: security.txt
Awesome Lists containing this project
README
🚀 AR-Webstore
Hi 👋, Shwet here and I welcome you to AR-Webstore!
It's a web application to visualize photorealistic 3D objects in AR (Augmented Reality).
## Table of Contents
- [Why AR-Webstore?](#why)
- [Current State of Project](#current)
- [Preview](#preview)
- [Future Goals](#goals)
- [Resources](#resources)
- [Technologies Used](#tech)
- [Setting up the project](#setup)
- [Build](#build)
- [A note on debugging](#debug)
- [Open Source Programs](#open-source)
- [Project-admin](#project-admin)
- [Contributors](#contributors)
## 🤔 Why AR-Webstore?
### Problem 😧
Traditional e-commerce platforms fail to deliver immersive product experiences, leaving customers uncertain about the look, fit, and functionality of items. This lack of visualization leads to higher return rates as products may not meet expectations. Additionally, customer engagement suffers due to the limited ability to interact with and explore products online.
### Solution 😃
Our AR-Webstore revolutionizes the shopping experience by seamlessly integrating augmented reality. With AR-Webstore,customers can visualize products in their own spaces and view all the virtual features more clearly. This empowers customers to make informed decisions, reduces return rates, and enhances engagement, resulting in a more satisfying and immersive shopping journey.
## Current State of the Project
It provides you a list of e-commerce products along with their 3D photorealistic models to try out them in a 360deg viewer. Also, you can view those products in your own environment using augmented reality, where you can check each and every detail of products like chairs, photo frames, and cars as if they were actually present in your room.
## 👀 Preview
## [Live Link](https://ar-webstore.netlify.app/)
# 🤩 Future Goals
- Build an e-commerce platform that can provide an immersive online shopping experience.
- Make the products interactive in a real environment rather than just demonstrating static 3D models using ML-AI.
# 😇 Learning Exposure
XR, or Extended Reality, is an exciting technology that combines the real world with virtual elements. As a student interested in XR, while contributing to this project, you will learn about the technical aspects of XR, which involve understanding how to create and render virtual objects, recognize and track objects in the real world, and explore how users interact with virtual environments, ensuring intuitive and immersive experiences. While studying XR, you can delve into programming technologies like Three.js or Unity to develop interactive and immersive experiences. You'll also explore 3D modelling and animation to create virtual objects and environments.
No no! Don't worry about some top of the world words mentioned above, the project is completely beginner friendly 😅 !But if you give your best, then you can really learn and build something out of the box for the future while working on this project, which I can ensure 😎!Find some helpful resources below to start your journey in XR.
## Resources 🙌
- [Develop your first WebAR app using WebXR and Three.js](https://codemaker2016.medium.com/develop-your-first-webar-app-using-webxr-and-three-js-7a437cb00a92)
- [WebXR Workshop](https://www.youtube.com/watch?v=gAzIkjkJSzM)
## 🧰 Technologies Used
## 🔥 Setting up and running the app locally
1. Fork the repo
- First, you have to make your own copy of the project. For that, you have to fork the repository.You can find the fork button on the top-right side of the browser window.(Refer to the image below.)
- Kindly wait till it gets forked.
- After that copy, it will look like "/AR-Webstore" forked from "ShwetKhatri2001/AR-Webstore"
2. Clone the repo to your system
- Now you have your own copy of the project. Here, you have to start your work.
- Go to the desired location on your computer where you want to set up the project.
- Open that location on your terminal and clone the repo using the commands given below.
```
git clone https://github.com//AR-Webstore.git
```
```
cd AR-Webstore
```
3. To get the web app up and running, you need to run the following commands to install dependencies and start the app.
```
npm install
```
```
npm start
```
This will install the app dependencies, start an instance of webpack-dev-server, and expose the local web server to the internet using the local tunnel URL will be printed on your terminal.
1. Get the docker
For Windows/WSL use this : (https://docs.docker.com/desktop/install/windows-install/)
For Mac use this: (https://docs.docker.com/desktop/install/mac-install/)
2. Check whether docker has been installed or not using
`docker -v`
3. Pull the Image of #AR-webstore from dockerhub
`docker pull shwetkhatri2001/ar-webstore`
4. List the images that are present currently
`docker images`
5. Run the docker image of #AR-webstore
`docker run -p 3000:3000 shwetkhatri2001/ar-webstore`
You will get the react-app running on `http://localhost:3000/`
Run `npm run build` to build the project. The build artifacts will be stored in the `build/` directory.
```
npm run build
```
## 📝 A note on debugging
For development and debugging, attach the device to your machine using a cable and access the url `chrome://inspect/#devices` in your desktop version of Chrome. Allow debug access when prompted on your device. You should then be able to see your device appear in the inspection window you opened earlier, where you can use the `inspect` functionality to get access to the running app instance for debugging.
### This project has been a part of the following Open Source Programs
## Mentors
I am looking for some mentors who can help me maintain the project workflow.
### Credits goes to these people:
