Projection Based Augmented Reality is described as an Image/video projection technique that can be extended and reinforce visual data by throwing images on the surface of 3D objects. Graphical and Imaginary representation is straightforward to implement with Projection Based AR techniques that standard lighting techniques cannot express. This kit helps users to experience the shopping experience like wearing Glasses, cap, earring in AR mode.
Aframe is a framework for building virtual reality websites. This project will show you how to build an e-commerce site using aframe, AR.js, mind-AR.js, and Sketch-three.js. Aframe has many components that can be used together or separately in your project. You may already be familiar with React or Three.js - these are two of the most common technologies used in web development today. They're used here as well! Aframe brings together these technologies and provides a simple interface for building virtual reality experiences on the web while maintaining the power of React and Three.js behind the scenes.
Please see below a sample solution kit to jumpstart your solution on Projection Based AR Kit. To use this kit to build your own solution, scroll down to refer to sections Kit Deployment Instructions.
Training and Certification - How to build AR Powered E-commerce site
Watch this self-guided tutorial on how to create a-scene tag, a-camera element/ frame, a-assets to render into scene, to build your own Augmented Reality Powered E-commerce site.
Completed the training? Apply for your Participation Certificate and Achievement Certificate now!
Tag us on social media with a screenshot or video of your working application for a chance to be featured as an Open Source Champion and get a verified badge.
Kit Deployment Instructions
Follow the below instructions to deploy and run the solution.
1. Download, extract and double-click kit installer file to install the kit.
2. After successful installation of the kit, press 'Y' to run the kit.
3. To run the kit manually, press 'N' and locate the zip file 'mind-ar-js'.
4. Open folder in Visual Studio Code.
5. Run the 'Facefilters.html' file.
6. Now, you will experience Augmented Reality in your own Environment!
Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.
A-Frame is an open-source web framework used for building Augmented reality (AR) experiences.
Web-based augmented reality (WebAR) is the most advanced technology that allows users to access AR experiences directly from their smartphones.
Three.js is the open-source web framework used to develop augmented reality (AR) projects.