kandi background
Explore Kits

Build E-commerce site with AR

by kandikits Updated: Oct 20, 2022


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.

Deployment Information

The mind-ar library added in this section is primarily used to create Projection Based AR project. The entire solution is available as a package to download from the source code repository.


  1. Download, extract and double-click the kit installer file to install the kit.
  2. After the 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 the folder in Visual Studio Code.
  5. Run the 'Facefilters.html' file.
  6. Now, you will experience Augmented Reality in your own Environment.


Click on the button below to download the solution and follow the deployment instructions to begin set-up. This 1-click kit has all the required dependencies and resources you may need to build your AR E-commerce App.

Troubleshooting

  1. While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
  2. During kit installer, if you encounter a Windows security alert, click Allow

For a detailed tutorial on installing & executing the solution as well as learning resources including training & certification opportunities, please visit the OpenWeaver Community

Development Environment

Visual studio code IDE is used for this development. It becomes easy and simple to develop an interactive UI with Visual studio code.

vscodeby microsoft

TypeScript star image 130477 Version:1.66.2

License: Permissive (MIT)

Visual Studio Code

Support
Quality
Security
License
Reuse

vscodeby microsoft

TypeScript star image 130477 Version:1.66.2 License: Permissive (MIT)

Visual Studio Code
Support
Quality
Security
License
Reuse

AR Libraries

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.

aframeby aframevr

JavaScript star image 13681 Version:v1.2.0

License: Permissive (MIT)

:a: web framework for building virtual reality experiences.

Support
Quality
Security
License
Reuse

aframeby aframevr

JavaScript star image 13681 Version:v1.2.0 License: Permissive (MIT)

:a: web framework for building virtual reality experiences.
Support
Quality
Security
License
Reuse

AR.jsby AR-js-org

JavaScript star image 3449 Version:Current

License: Permissive (MIT)

Image tracking, Location Based AR, Marker tracking. All on the Web.

Support
Quality
Security
License
Reuse

AR.jsby AR-js-org

JavaScript star image 3449 Version:Current License: Permissive (MIT)

Image tracking, Location Based AR, Marker tracking. All on the Web.
Support
Quality
Security
License
Reuse

sketch-threejsby ykob

JavaScript star image 1633 Version:Current

License: Permissive (MIT)

Interactive sketches made with three.js.

Support
Quality
Security
License
Reuse

sketch-threejsby ykob

JavaScript star image 1633 Version:Current License: Permissive (MIT)

Interactive sketches made with three.js.
Support
Quality
Security
License
Reuse

Kit Solution Source

mind-ar-jsby hiukim

JavaScript star image 621 Version:v1.1.4

License: Permissive (MIT)

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js

Support
Quality
Security
License
Reuse

mind-ar-jsby hiukim

JavaScript star image 621 Version:v1.1.4 License: Permissive (MIT)

Web Augmented Reality. Image Tracking, Face Tracking. Tensorflow.js
Support
Quality
Security
License
Reuse

Support

If you need help using this kit, you may reach us at the OpenWeaver Community.

  • © 2022 Open Weaver Inc.