Create your own Virtual Reality experiences with the WebVR Starter Kit

A free, 5-part video course with interactive code examples that will teach you the fundamentals of WebVR using A-Frame.

Glitch
Glitch
Feb 12 · 2 min read

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, regardless of your prior coding 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.

“Our hope is that this starter kit will encourage anyone who has been on the fence about creating virtual reality experiences to dive in and get started.” - Lars Bergstrom, Director of Engineering, Mixed Reality at Mozilla

To guide you, we’ve enlisted the help of WebVR experts: Jenn Schiffer, Director of Community Engineering at Glitch, melissa mcewen, Developer Education at Glitch, and Jake Loeterman, Software Engineer at Kickstarter.


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.

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.

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”.

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.

To learn more, check out the A-Frame Docs. If you get stuck, just raise your hand.

Glitch

The friendly community where everyone can discover & create the best stuff on the web.

Glitch

Written by

Glitch

The friendly community where everyone can discover & create the best stuff on the web.

Glitch

Glitch

The friendly community where everyone can discover & create the best stuff on the web.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade