An Intro to WebVR
By Glitch Team

February 12, 2019

An Intro to WebVR

A new generation of headsets and sensors on our mobile phones are making virtual reality more accessible than ever. But learning how to create your own VR experiences can be tricky. We created the WebVR Starter Kit with Mozilla using A-Frame to walk you through creating your first VR experience. By combining how-to videos with working code examples that you can remix, you can learn the theory and go straight to trying it out yourself.

Part 1: Intro to WebVR #

Jenn and Melissa explain what WebVR is, when you might use it, and how you can create your own experiences with it. While Jake tells us about how he started using WebVR.

Part 2: A-Frame Starter #

We take a look at how you can use A-Frame to create your own WebVR experiences. Using our 3D planetarium starter app, "starter-aframe", we learn about the main components of a WebVR scene and Jake tells us how he goes about planning his own scenes.

Try it out re-using the app featured in this video:

View Source | Remix This

Part 3: A-Frame Concepts #

We show you how to add assets like 3D models to your scenes and introduce you to the A-Frame inspector to experiment with updating your scene without code. While Jake tells us about the cool things he's used in his own WebVR creations.

Try it out for yourself:

View Source | Remix This

Part 4: A-Frame Animation #

We explain how animation works in A-Frame using mix-ins by showing you how we made the planets orbit the Sun in our example app, "starter-aframe-animated".

Try it out for yourself:

View Source | Remix This

Part 5: Extending A-Frame #

We suggest some more advanced things, like using JavaScript in your scenes, that you can try out once you've mastered the basics.

Try it out for yourself:

View Source | Remix This

Hosts #

Further Resources #