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
perspective.
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
respectively.
XYZ Coordinates
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"
Starting Template
This is a simple a-frame file skeleton that you can use to get you started on a project.
<!DOCTYPE html>
<html>
<head>
<script src="https://aframe.io/releases/1.0.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
Put your a-frame code here!
</a-scene>
</body>
</html>
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:
<a-sphere></a-sphere>
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 Plane
A plane can be added using the tag. To create a plane using default values for things like color, rotation, etc, you can simply add in an empty plane tag like so:
<a-plane></a-plane>
However, you should at least set the rotation, position, and color of the plane by specifying those attributes in the opening tag:
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.
Names are not case-sensitive. "RED" is the same as "red".
There are 140 valid color names. See a full list of all names here
Example:
p {
color: blue;
}
Result:
Hello
RGB Colors
HTML and CSS represent colors with the RGB (Red Green Blue) color encoding system.
Every color can be made just by mixing different amounts of red, green, and blue.
RGB color values can be specified in CSS using "rgb(red, green, blue)"
Each value can be between 0 and 255, inclusive.
rgb(255, 0, 0) would be red
rgb(255, 255, 255) would be white
rgb(0, 0, 0) would be black
Example:
p {
color: rgb(255, 0, 0);
}
Result:
Hello
Hex Color Values
We can also represent RGB colors using hexadecimal values. 6 hexadecimal digits make up a color:
The first two hexadecimal digits specify the amount of RED in the color
The next two hexadecimal digits specify the amount of GREEN in the color
The last two hexadecimal digits specify the amount of BLUE in the color
Each digit can be a value from 0 to F, with 0 being the least and F being the most
"#ff0000" would be red
"#ffffff" would be white
"#000000" would be black
Example:
p {
color: #0000ff;
}
Result:
Hello
Color Picker
Use this color picker to find the exact color you want for your web page:
More A-Frame Features
Textures / Images
You can add textures to objects so that their surface looks like an image, rather than a color, using the src attribute. Just set the src to be the url for the image you want to use:
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
<a-camera>
<a-cursor></a-cursor>
</a-camera>
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.
Example
Gaze-based Interaction
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.
Example
