A-Frame Basics

The A-Frame World

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: 
<a-sphere position="0 1 -5" radius="2" color="red"></a-sphere>
Example

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: 
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
Example

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: 
<a-box position="0 1 -5" depth="2" height="4" width="0.5" color="tomato"></a-box>
Example

Adding a Cone

A cone can be created using just the defaults, but you should at least set the position, bottom radius, top radius, height, and color: 
<a-cone color="blue" radius-bottom="2" radius-top="0.5" height="1" position="0 1 -3"></a-cone>
Example

Adding a Sky

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. 
<a-sky color="#EEEEEE"></a-sky>
<a-sky src="imgURL.jpg"></a-sky>
Example

Color Basics

Color

CSS Colors can either be:

Color Names

Common color names: 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)"
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:
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: 
<a-sphere src="imageurl.jpg" radius="2" position="0 0 -3"></a-sphere>
Example

Other Elements

Cylinder: 
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
Torus (donut): 
<a-torus color="#43A367" arc="360" radius="1" radius-tubular="0.1" position="0 2 -4"></a-torus>
Example

Camera

The camera is the user’s viewpoint into the world. The world will have a camera by default, with a default position of 0 0 0.

You can add attributes to the camera using the camera tag <a-camera>

To set a new starting position, you’ll have to wrap the camera tag inside an a-entity: 
<a-entity position="0 3 5">
	<a-camera></a-camera>
</a-entity>

Animation

You can add animations to any entity. Use the "animation" attribute of an entity to define how it should animate: 
<a-sphere
    position="-1 0 -4"
    radius="0.5"
    color="#803d8c"
    animation="
        property: scale;
        from: 1 1 1;
        to: 2 2 2;
        easing: easeInOutElastic;
        loop: true
    "
></a-sphere>

Common properties that you may want to animate include: In addition to the basic animation, there are several other animation attributes that you may want to consider: Example

Click Interaction

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. 
<a-camera>
	<a-cursor fuse=“true” fuse-timeout=“1000”></a-cursor>
</a-camera>
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