A-Frame is WebVR framework for creating virtual reality (VR) experiences
with HTML. We can build VR scenes that work on smartphones (either with or
without the cardboard viewer), desktop computers (with VR Enabled Browsers)
or on the Oculus Rift.
Moving in A-Frame
You can look around by grabbing the screen with mouse and turning your
You can also ‘walk’ around in the world using the WASD keys. Use W to walk
forward, S to walk backwards, and A and D to slide left and right
Since A-Frame is a 3D world, we need to use x, y, and z coordinates. In
A-Frame, positive x axis is to the right, positive y axis is up, and
positive z axis is out of the screen. See the below axis as a reference:
Points in the world can be defined by their (x, y, z) coordinates.
(0, 0, 0) would be the center of the world.
(1, 3, -2) would be a point 1 meter in the x direction (to the right), 3 in the y (up), and -2 in the z (into the screen).
The A-Frame world uses meters as units. A box of size 100 meters can be zoomed out to look normal on a computer screen, but when put into a VR environment, it will look massive!
All points in the A-Frame world will be defined by their xyz coordinates, separated by spaces, for example:
"0 0 0"
"1 3.5 -2.1"
This is a simple a-frame file skeleton that you can use to get you started on a project.
Put your a-frame code here!
Adding a Sphere
All objects should be added inside the <a-scene> element.
A sphere can be added using the <a-sphere> tag. To create a sphere using default values for things like color, radius, etc, you can simply add in an empty sphere tag like so:
However, you should at least set the radius, position, and color of the sphere by specifying those attributes in the opening tag:
You can add a variety of attributes to the opening tag of any object, but the most common will be color, position, size, and rotation. Size and rotation are defined by their three x y z values separated by spaces, such as "0 2 -5"
Full list of attributes you can modify
Adding a Box
A box can be created using just the defaults, but you should at least set the position, size, and color of the box:
The sky element is a way to give the scene a different background than the plain white default. The sky can either be a color or an image. If using an image, a 360 image should be used for the best effect.
You can interact with objects in the world as well. First, add a cursor to the camera, this will add a “cross-hair” to the camera showing where the user is looking
Set your animation to only begin on a click by adding begin="click" as an attribute on the animation.
Now the animation will trigger whenever the user is looking at the object AND the mouse is clicked.
On a phone or an occulus, there are no mice for clicking. So instead, we trigger animations by looking at an object for a certain amount of time. To do this, add a fuse and a fuse-timeout to the cursor.
The fuse triggers a click event after fuse-timeout milliseconds. So in the example above, if a user looks at an object for 1000 milliseconds (1 second), it is as if the user clicked on the object. Any click-based animations on that object would then begin.
Slides and Notes
No slides available for this video
View on Phone
Scan this QR code to view on mobile.
Collaborate on this sandbox program!
A collaborative program is a program you can work on with a partner or
group of people. The program shows up in all of your sandbox pages, and when any of you save code,
it will save it for each person.