Voilà! A few lines of code and we have ourselves a virtual environment in the browser.
Explore the environment by click-dragging the mouse and move around with w, a, s, d or arrow keys.
The A-Frame code is contained inside an
<a-scene> element that establishes the scene in the browser. Here, we are using a few basic primitives:
A-Frame primitives, such as
<a-box>, are a wrapper of larger pieces of code that we can easily reuse in our program.
They are great ways for beginners to create 3D objects, also known as meshes, right off the bat. They usually have a name that’s easy to remember and come with a bunch of components (i.e.
The button on the bottom-right of the browser is for entering the VR mode with a headset or fullscreen mode on a desktop.
To return to the code editor from the virtual environment, use the esc key or the Menu button on a VR controller.
The index.html file is exactly the same from the previous exercise, just formatted a little differently. Let’s see how changing the code will affect the scene.
On line 13, change the
radius value from
After that, feel free to change the other values to get a sense of how each primitive works.