My First VR Tutorial
TL;DR: Delete the comment tags on
index.html to get started.
Right now, this webpage looks wicked boring
Let’s fix that.
line 33 of
index.html and delete
line 50 of
index.html and delete
Take a lookt at
index.html to see A-Frame’s Web VR technology come to life. Onward!
TL;DR: ‘VR’ stands for ‘virtual reality’ – an explorable digital environment that seems three-dimensional (3D) to a user.
VR environments are built to have the illusion of depth, even on a two-dimensional (2D) screen. While different VR technologies have been around for a long time, the Oculus Rift and Google Cardboard VR headsets, along with Web technologies like Web Graphics Library (WebGL) and Mozilla’s A-Frame, are making VR more accessible and mainstream than ever before.
If you’re browser doesn’t support Web VR yet, you can still ‘spin’ the page by clicking, holding, & dragging your mouse and you can edit everything in HTML to create your VR scene.
According to its FAQ, A-Frame
…is an open source framework for easily creating WebVR experiences with HTML. It is designed and maintained by MozVR (Mozilla’s virtual reality team research team). A-Frame wraps WebGL in HTML custom elements, enabling web developers to create 3D VR scenes that leverage WebGL’s power, without having to learn its complex low-level API.
What does that mean?
While you can learn to do an awful lot with A-Frame, it’s easy to begin coding simple shapes and effects. With very little HTML experience, you can create a 3D, VR environment online using A-Frame.
TL;DR: When you link to an external script, you run its code on your webpage even though it’s hosted from another computer on the Internet.
When you use the
script tag on your webpage, you have to provide the
src, or source, for that script, as well. A script’s
src is its location, or address, either inside a folder on your computer or somewhere on the Web. As your webpage loads, it brings the code from your
script into the page and executes it, applying its rules and effects to your page.
If you click on
index.html in the FILES sidebar on the left-hand side of the Thimble interface, you can see how this looks at
Some external scripts are small and discrete – they do one or two things like make a button work on a survey. Other scripts are large, made of several parts, and much more complex, like a Web-native video game.
Another kind of script – called a library – contains an entire set of primitives and rules for using them in your webpage. A-Frame is a library that gives you access to ‘primitives’ – generic primitives like
a-light – along with rules you can use for maniupalting them – like
People call in external libraries like A-Frame to take advantage of their primitives and rules without having to write all the code that runs theme every time they make a new VR webpage.
A-Frame is an open source project, which means that everyone with access (and we need to help many more people have much more access) can use the library and even copy and change it for their own uses. Open source projects like A-Frame in emerging technology areas like VR are important because they make it easy for non-experts to understand and use rich web technologies to voice themselves and read, write, and participate on the Web. Making new technologies available to as many people as possible is one way to safeguard the Web as a free, public resource and democratic space for communication, creativity, and problem-solving.
TL;DR: A primitive is a basic, generic primitive you can copy repeatedly and customize with code.
In A-Frame, primitives include the basic shapes you might use to create an explorable webpage or graphic design in 3D. These include
a-sphere. Notice how A-frame’s developers name primitives to be easily readble by humans, as well as machines.
In this tutorial, you’ll have the chance to manipulate several different primitives and effects like camera-position and lighting.
TL;DR: You can easily change the
color, dimensions, and
position of an A-Frame primitive.
First, look at
line 25 and
line 36 of
index.html. You can see the
a-scene tags that surround our other A-Frame elements. This set of
Next, take a look at
a-sphere, beginning at
line 27 of
index.html. Each primitive has a
position you can maniuplate by changing the numbers inside the quotation marks.
In A-Frame, these primitives all begin with a default position of
"0 0 0". If you have multiple primitives, it’s important to position them differently so they don’t cover each other. Also in A-Frame,
1 equals one meter. If you position an primitive with a high value like
20, it might appear off-screen.
You can position
a-light the same way to create new camera angles and lighting effects on your page.
That one-meter unit of measurement also applies while sizing primitives. Try changing the
a-cylinder, and the
a-sphere. See what happens as you increase and decrese the values for each shape’s dimensions. Remember to use relatively low values for the size of each primitive unless you want it to take up the entire screen and block out the rest of your page.
Finally, mess around some with the
color of each shape. You can use an HTML color-picker like this one to change each shape’s
TL;DR: You can use any ‘equirectangular’ picture as a background for your VR webpage.
A-Frame lets you create a background for your page using an
a-sky primitive like the one at
line 31 of
a-sky element uses
src to call an external image into the webpage in much the same way our
script tags call in the A-Frame library. You can create your own background image or find one online. However, your background image has to be ‘equirectangular:’ it has to have a 2:1 width to height ratio.
Let’s change the background on this page.
Online photo-sharing sites like Flickr have equirectangular photo groups you can browse for images to use in your
a-sky element. Broswe for the image you want. Try to use pictures that have Creative Commons licenses, like CC-BY or CC-BY-SA, to avoid copyright issues and to include easily shareable, openly licensed assets in your work.
Once you’ve found your image, control-click or right-click it to ‘copy image address.’ Next, paste that image’s URL (or web address) into the quotation marks following
a-sky. Take a look at
index.html in Thimble’s preview pane to see how your background has changed.
TL;DR: You can position the
a-light element to match a light source in your background picture.
After you update your background image using
a-sky, revisit the
position attrbiute of
line 32 of
index.html. Try to match the position of
a-light with the position of a light source in your background. Look for obvious sources such as the sun or a candle. Then approximate where you should place
a-light using the x-y-z coordinates in
You can add multiple light sources with different colors and positions if you need to.
Once you’re satisfied with the way light and shadow interact with your shapes, hit ‘Publish’ in the upper right-hand corner of the Thimble interface. Describe your project, publish it, and share the link to your first Web VR project with the world!
Congratulations! You’ve built your first 3D, VR site on the Web! Keep working with A-Frame to create more complex, explorable projects online.