Basically you can think of this as being one for each dimension. You will notice that many of the attributes contain three attributes. The other three shapes are controlled in exactly the same way, but use the tags a-sphere, a-cone and a-torus. The “a-animation”, set within the “a-box” tag allows me to assign an animation to that particular element. By using the “a-box” tag I can create square or rectangular shape and can control the appearance and behavior by adding various attributes, such as height and width. Each shape is treated as an element, with a range of configurable attributes. The logo shapes are slightly more complicated, but still very quick to set up. There are also Spheres, Boxes, Cones and Other Shapes With the assets in place, creating the background is as easy as using the a-sky tag.
#SPLAYER HTML5 CODE#
The first section of my code defines some assets, namely the Bitmovin logo (logo.jpg) and the background 3D image (image.jpg) I assign ID tags to these assets so that I can reference them later. In my simple demonstration I created a sky, four shapes, some simple animations and activated the cursor so that the user can trigger the animations using a hover event. Within this tag, you can create elements, set up your camera positioning and define the way the background looks. Once that is in place you can create the 3D scene using the a-scene tags. The first step is to create a basic HTML file, and include the JavaScript plugin in the head of your HTML document in the same way you would include JQuery or any other JavaScript file. To create a scene like the demonstration above can be done in a few minutes. View the VR demo Getting Started with Browser Based Virtual Reality TechnologyĪframe is a JavaScript framework for building 3 dimensional environments within the browser. It wraps three.js and WebGL into HTML elements, creating an insanely easy to use framework that allows you to create a three dimensional web space within minutes. Control your position and view using your mouse and the W,A,S and D keys on your keyboard. You can enter the VR environment simply by following the link below. It links to the a-frame.js JavaScript file and to two images. This demo contains less than 40 lines of code in one HTML file. We have created a very simple demonstration to show how easy it is to get started with Virtual Reality in HTML5 and JavaScript. Theoretically you could embed VR movies and experiences within your web based VR cinema environment and create a browser based “Virtual VR cinema.” VR Browser Demo Looking ahead a little further, the steady push towards HTML5 compliance from all the major browsers means that it is becoming relatively easy to embed an HTML5 VR player or an html5 360 video player within the HTML5 VR environment. A smooth transition from online browsing to VR. It is now relatively simple to create a three dimensional environment that loads directly into the user’s browser without any interruption to their experience. MOZVR and their new A-FRAME framework is changing all that.
#SPLAYER HTML5 SOFTWARE#
Obviously this sort of immersive experience is easy enough to create (if you have the skills) in a host of Virtual Reality software environments and computer game frameworks, but up until now, not in a normal web browser. Once the user selects a film to watch, she can walk into the cinema, maybe even choose the best seat, before sitting down to watch the film on an enormous cinema screen. Allow users to “walk” through the foyer, browsing film posters and viewing trailers right on the wall. Imagine creating a virtual cinema for your video portal. Thanks to MozVR’s A-FRAME, the internet is now available in Virtual Reality format, which means you can enter a virtual reality environment simply by opening a normal website. Usually when you think Virtual Reality or 360° you expect to open a video or some sort of software application. Thanks to MOZVR and their A-Frame JavaScript framework, you can now create a completely immersive web experience in standard web browsers.