WebVR : Build VR enabled Website using A-Frame

facebooktwittergoogle_plusredditpinterestlinkedinmail

WebVR on Websites Feature

VR (Virtual reality) is the simulated environment using computer technology . Now the modern mobile phones are VR enabled by default and we have to use the VR headset like Samsung Gear to get the VR experience. In this article I will explain the very basic example of WebVR using A-Frame.

What is A-Frame ?

A-frame is the project developed by the Mozilla VR team called MOZVR . A-frame simplifies the creation of VR in web using Javascript. It’s built within the WebVR API specifications and utilizes the WebVR boilerplate template.

WebVR - Logo

Support for A-Frame

  • Install Firefox Nightly, or experimental builds of chromium
  • Install the WebVR enabler add-on for Firefox
  • MOZVR recommences Google Cardboard V2-compatible headset for best results. WebVR is now tested with mobile Safari and Firefox for iOS, and Firefox for Android and Chrome on Android.

    A-frame also display the elements beautifully even in non-VR browser so there won’t be any problem for users on a standard desktop. A-Frame supports a wide range of 3D elements such as Panoramic images , 2D Content integration , 360 degree video etc.

    Create first WebVR using A-Frame


    As I mentioned earlier, A-Frame is on top of Javascript so you can use any text editor to start. However , now I am demonstrating with my favorite IDE Visual Studio. Open Visual Studio and create an ASP.NET web app. Refer the aframe.min.js file in your project. Write the following html in view and run the application.

    <!doctype html>
    <html>
    <head>
        <title>My first VR site</title>
        <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
    </head>
    <body>
        <a-scene>
            <a-cube></a-cube>
        </a-scene>
    </body>
    </html>

    The another nice thing about A-Frame is, all the A-Frame elements starts with ‘a’ . The cube will be displayed as follows.
    WebVR - AFrame

    You can see one VR headset icon on the right corner, that will indicate the WebVR compatibility of our browser. You will get the VR experience via VR headset. You can see more examples from A-Frame official web . If you want to learn more about A-Frame then go to the complete documentation.

    The following two tabs change content below.

    Tom Mohan

    Tom Mohan is a technologist who loves to code and build. He enjoys working on Microsoft Technologies. Tom specializes in ASP.NET MVC, Web API , Azure, C# ,WPF, SQL etc and holds a Bachelor engineering degree in Computer Science. Certification : MCSD , MCTS