Skip to Content
Learn
Introduction to A-Frame
Browser

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-box>
  • <a-sphere>
  • <a-cylinder>
  • <a-plane>
  • <a-sky>

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. position, color, width).

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.

Instructions

1.

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 1.25 to 0.50.

After that, feel free to change the other values to get a sense of how each primitive works.

Folder Icon

Take this course for free

Already have an account?