Build E-commerce site with AR

share link

by kandikits dot icon Updated: Aug 17, 2023

technology logo
technology logo

1-Click Kit 1-Click Kit  


Projection Based AR is 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.


For Windows OS,

  1. Download, extract and double-click the kit installer file to install the kit.
  2. When you're prompted during the installation of the kit, press Y to launch the app automatically.
  3. To run the kit manually, press 'N' and locate the zip file 'mind-ar-js-main'.
  4. Extract the folder to any desired path.
  5. Open the extracted folder in Visual Studio Code or any IDE of your choice.
  6. Run the 'Facefilters.html' file to experience Augmented Reality in your own Environment.


For other Operating Systems,

  1. download the repository.
  2. Extract the zip file and navigate to the directory 'mind-ar-js-main'
  3. Run the 'Facefilters.html' file to 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 doticonstar image 147328 doticonVersion:1.79.2doticon
License: Permissive (MIT)

Visual Studio Code

Support
    Quality
      Security
        License
          Reuse

            vscodeby microsoft

            TypeScript doticon star image 147328 doticonVersion:1.79.2doticon 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 doticonstar image 15445 doticonVersion:v1.4.2doticon
                      License: Permissive (MIT)

                      :a: Web framework for building virtual reality experiences.

                      Support
                        Quality
                          Security
                            License
                              Reuse

                                aframeby aframevr

                                JavaScript doticon star image 15445 doticonVersion:v1.4.2doticon License: Permissive (MIT)

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

                                          AR.jsby AR-js-org

                                          JavaScript doticonstar image 4613 doticonVersion:3.4.5doticon
                                          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 doticon star image 4613 doticonVersion:3.4.5doticon License: Permissive (MIT)

                                                    Image tracking, Location Based AR, Marker tracking. All on the Web.
                                                    Support
                                                      Quality
                                                        Security
                                                          License
                                                            Reuse
                                                              JavaScript doticonstar image 2016 doticonVersion:Currentdoticon
                                                              License: Permissive (MIT)

                                                              Interactive sketches made with three.js.

                                                              Support
                                                                Quality
                                                                  Security
                                                                    License
                                                                      Reuse

                                                                        sketch-threejsby ykob

                                                                        JavaScript doticon star image 2016 doticonVersion:Currentdoticon License: Permissive (MIT)

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

                                                                                  Kit Solution Source

                                                                                  mind-ar-jsby hiukim

                                                                                  JavaScript doticonstar image 1610 doticonVersion:v1.2.2doticon
                                                                                  License: Permissive (MIT)

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

                                                                                  Support
                                                                                    Quality
                                                                                      Security
                                                                                        License
                                                                                          Reuse

                                                                                            mind-ar-jsby hiukim

                                                                                            JavaScript doticon star image 1610 doticonVersion:v1.2.2doticon 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.

                                                                                                      See similar Kits and Libraries