Error
Errors:
Want more? Check out the full A-Frame documentation!
Want More? Check out the full A-Frame documentation!
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.
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"
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:
There are 140 valid color names. See a full list of all names here
- A valid color name, such as "Blue" or "DarkGreen"
- An RGB value, such as "rgb(255, 0, 0)"
- A HEX color code, such as "#68ff00"
Color Names
Common color names:- red
- orange
- yellow
- green
- blue
- cyan
- indigo
- black
- white
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)"
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:<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:
- scale
- position
- color
- rotation
- opacity (how visible something is)
- visible
- dur - Specify the duration of the animation (in milliseconds)
- repeat - Specify either a number of times to repeat, or you can say indefinite
- begin - Specify when the animation should start. It can be either a time value (in milliseconds), or an event, such as "click".
- direction - Specifies whether to start at the to or the from. Valid values are normal, reverse, or alternate.
- fill - Specifies how to reset the element before or after the animation. Valid values are backwards, forwards, both, or none.
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
Slides and Notes
No slides available for this video
Collaborate on this sandbox program!
Admin Only. Not visible to customers
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.
Current Collaborators:
Embed Your Code On an HTML Page
Want to use your CodeHS code outside of CodeHS? Use this embed code to get started.
How to Use
Version 1: On Your Computer
- Create a file called
codehs.htmlon your desktop - Put the html below into the codehs.html file and save it
- Now double click the file to open it in a web browser
Version 2: Online
- Create a file called
codehs.htmlon your desktop - Put the html below into the codehs.html file and save it
- Upload this file to the internet
- Visit your web page
Note this only works on single files currently.
About
Virtual Reality with A-Frame
A-Frame 1.0.0