Virtual reality is the new frontier for web development, and we’re at the cutting edge. It’s still an experimental technology, so remember that it might get buggy at some edge cases, but the good news is we can already play with browser-based VR, create demos and experiments, and shape the way millions of people will use it in the next years.
A-Frame is a framework delivering the familiar approach to front-end developers. Instead of building 3D environments with raw WebGL, Three.js or game-specific PlayCanvas, you can do that with HTML. See this basic example and think how many lines of code you’d need to create it using other tools:
It’s a simple cube, but a developer knows that 3D scene needs a renderer, camera, lights, the shape needs a geometry and material, there are also extra things to consider such as mouse and keyboard controls to look around. Can you imagine this whole scene could be created in a few lines of HTML?
<!doctype html> <html> <head> <meta charset="utf-8"> <title>MDN Games: A-Frame demo - cube</title> <script src="js/aframe.min.js"></script> </head> <body> <a-scene> <a-sky color="#DDDDDD"></a-sky> <a-cube color="#0095DD" position="0 1 0" rotation="10 20 0"> </a-cube> </a-scene> </body> </html>
That’s everything you need to have a cube on your screen that can be viewed in virtual reality - a simple markup with a couple of properties. It’s a perfect tool for rapid prototyping as you can build working demos in minutes. You don’t have to fight with browser specific bugs as the framework is taking care of all that. There’s a powerful API behind it though, so if you feel you’re an advanced developer you can unleash the full power of A-Frame building rich virtual environments too.
Read the WebVR article for a bit of VR theory, the A-Frame tutorial for the instructions on how to build your first 3D VR project and check out the A-Frame demo on GitHub for the source code used in the tutorial. Start building your own WebVR experiments right away!