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.
- Download, extract and double-click kit installer file to install the kit.
- 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/").
- To run the kit manually, press 'N' and locate the zip file 'India-tour-VR'.
- Open folder in Visual Studio Code.
- 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
- Then go to "index.html" file place the image inside the < img / > Tag Example :- < img src="assets/ImageName.jpg" / >
- Run the command "python -m http.server 8000" in command prompt.
- 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
- 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.
- 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
- While running batch file, if you encounter Windows protection alert, select More info --> Run anyway
- 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.
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
:a: Web framework for building virtual reality experiences.
aframeby aframevr
JavaScript 15445 Version:v1.4.2 License: Permissive (MIT)
sketch-threejsby ykob
Interactive sketches made with three.js.
sketch-threejsby ykob
JavaScript 2016 Version:Current License: Permissive (MIT)
Kit Solution Source
India-tour-VRby RajiMahendiran
You can experience Virtual reality view of the 360 degree images
India-tour-VRby RajiMahendiran
HTML 1 Version:v1.1 License: Permissive (MIT)
Support
If you need help using this kit, you may reach us at the OpenWeaver Community.