Virtual reality, three dimensional, computer generated environments that can be interacted with, has been all the craze recently. From immersive games to training simulations, it has created a revolutionary and efficient impact in both the business and education fields. And it seems innovative content will continue to be developed as Mozilla revealed A-Frame, a web framework for building virtual reality experiences.

A-Frame is accessible to everyone: web developers, VR enthusiasts, artists, designers, educators, makers, kids.

With just HTML, developers can create 360 degree worlds, complete with user movement and controllers as A-Frame supports the use of most VR headsets such as Rift, Vive, Windows Mixed Reality, Daydream, GearVR, and Cardboard. But best of all, A-Frame can be programmed to have responsive design. Don’t have a VR headset? No problem! When A-Frame does not detect a VR headset connected, programmers can have the program switch from headset mode to mobile, if the browser is on mobile, or desktop. This ability to adapt provides a way to share your creation to all types of users.


Some interesting creations include:

Campfire VR: Creating low poly virtual worlds with A-Frame and shaders

SuperMedium: Explore browsers in virtual reality

Space Voyage: a WebVR version of BAFrontend’s space voyage animation

Wide-Cream: virutal reality escape the room

PayDay2 VR: PayDay2 VR announcement through A-Frame

There are already well over 200 contributors to A-Frame!

For those interested in developing with A-Frame, there is already a plethora of resources to help you. To get started, read through A-Frame’s documentation and follow their step-by-step visual tutorial. If you have any questions, there is a dedicated Slack channel and StackOverflow community ready to answer any questions you have! If you ever need any inspiration, check out A-Frame’s weekly blog to see what others are up to and who knows, your project might get featured on their A Week of A-Frame.

Photo by Eddie Kopp on Unsplash

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: