Tour in VR

share link

by kandikits dot icon Updated: Oct 20, 2022

technology logo
technology logo

1-Click Kit 1-Click Kit  


Virtual Reality is an advanced technology simulation that enables a person interaction with an artificial three-dimensional (3-D) visual or other sensory environments. This Kit helps users and developers to create a web framework for building multi-image virtual reality experiences.


Sketch Three is a tool for building 3D environments in the browser. It uses three.js, a popular open-source game engine that can render graphics in real time. A-Frame is an HTML-based framework for building virtual reality experiences in the browser. It uses three.js under the hood, but it provides a simpler way to create VR content than coding directly with JavaScript.

Deployment Information

The library added in this section is primarily used to create Tour in VR project. The entire solution is available as a package to download from the source code repository.


  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 and open the local web server in the browser("http://localhost:8000/India-tour/").
  3. To run the kit manually, press 'N' and locate the zip file 'India-tour-VR'.
  4. Open folder in Visual Studio Code.
  5. To experience Virtual Reality with your own images, add the image in assets folder. Note:-Image should be in 360 degree to feel the Virtual Reality
  6. Then go to "index.html" file place the image inside the < img / > Tag Example :- < img src="assets/ImageName.jpg" / >
  7. Run the command "python -m http.server 8000" in command prompt.
  8. If you want to view the image, then place the small circle on the top of the image and click on that to visualize the image in VR Mode
  9. To view other images, then drag the screen such that the small circle is placed on the top of the image to be viewed and once the circle is on top of the image, click on it.
  10. Now, you will experience Virtual 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 Tour App in VR.

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

                      VR Libraries

                      A-Frame is an open-source web framework used for building Virtual reality (VR) experiences. Three.js is the open-source web framework used to develop Virtual reality (VR) 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
                                          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

                                                              India-tour-VRby RajiMahendiran

                                                              HTML doticonstar image 1 doticonVersion:v1.1doticon
                                                              License: Permissive (MIT)

                                                              You can experience Virtual reality view of the 360 degree images

                                                              Support
                                                                Quality
                                                                  Security
                                                                    License
                                                                      Reuse

                                                                        India-tour-VRby RajiMahendiran

                                                                        HTML doticon star image 1 doticonVersion:v1.1doticon License: Permissive (MIT)

                                                                        You can experience Virtual reality view of the 360 degree images
                                                                        Support
                                                                          Quality
                                                                            Security
                                                                              License
                                                                                Reuse

                                                                                  Support

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