Skip to content

Webstore built to showcase photorealistic 3D digital objects in AR

License

Notifications You must be signed in to change notification settings

iamparas0/AR-Webstore

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

39 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

πŸš€ AR-Webstore


AR-Webstore

Hi πŸ‘‹, Shwet here and welcome to AR-Webstore!

It's a web application to visualize photorealistic 3D objects in AR (Augmented Reality).

Table of Contents

πŸ€” 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 showcases a 3D photorealistic model of a chair in your own environment using augmented reality, where you can check each and every detail about the chair as if it were actually present in your room.

πŸ‘€ Preview

before after

🀩 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 πŸ™Œ

🧰 Technologies Used

three.js React JavaScript HTML5 CSS5

πŸ”₯ 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/<your-username>/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.

🧰 Build

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.

πŸ“Œ Open source Programs

This project is a part of the following Open Source Program


Project Admin


Shwet Khatri

Mentors

I am looking for some mentors who can help me maintain the project workflow.

Contributors πŸŽ‡

Credits goes to these people:

About

Webstore built to showcase photorealistic 3D digital objects in AR

Resources

License

Code of conduct

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 44.6%
  • HTML 36.3%
  • CSS 19.1%