Learn A-frame to build VR Websites

This is your first Hello World page designed with A-frame. It is adding a simple Box primitive to the page using one line of code and sourcing the correct library.

Following up on the Helloworld page, we will modify the color attribute using the names of the colors and also using their Hex codes. We will also make use of images as material for the objects.

A background image can be set using the <a-sky> tag. This lesson how to add a background and also shows the difference between adding a normal picture and an equirectangular image.

An entity has an opacity of 1 by default i.e it is fully opaque but transparency can be added through the use of opacity attribute. Opacity takes a value of 0 to 1 and 0 being completely transparent.

A sphere is a useful basic shape which can take colors and images as materials for rendering.

This lesson continues with add the geometric shapes Tetrahedron, Octahedron and Torus. 

A position attribute is available for all entities by default and this allows the developer to place entities anywhere in the three dimensional space.

The rotation attribute is very useful to create animation and it is available to all entities by default. Rotation attribute allows any entity to be rotated in the three dimensions using vec3 string. A rotation of "45 90 0" means a rotation of 45° in the x-axis, 90° in the y-axis and 0° in the z-axis.
 

Scale is also inherently available in all entities. It allows entities to be scaled in the three dimensions.  The scale take property value in vec3 format where "1 1 1" means exact scale and "2 1 1" would mean stretched in the x- dimension by twice.

Assets Management System is used in 3D animation to ensure that resources are already loaded when rendering of the object is being done. A-frame also has its Assets Management System and it allows pre-loading of Video, Images, Sounds and other Object Models using simple tags. These resources can then be used by referring to their ID's.

The Material is a component of an entity or primitive and a Video can also be used as the material. This gives very cool effects like e.g a sphere or cube playing a video.

In the Virtual Reality world, curved surfaces are useful to display information because they allow the user to view the whole surface at the same distance if correctly positioned. An image on a large flat surface may appear distorted on the far edges.

A handy feature is to easily display images and videos on plane surfaces. This is easily done in one-liners in A-frame. These surfaces can be rotated and positioned in any way required.

As WebVR developers, you will work with 360 Video with the increasing popularity of 360 Video Recorders. With A-frame it very easy to add objects in the scene while a 360 Video is playing in the background. This lesson teaches you how to set a 360 Video as Background.

This lesson will teach you how to add certain components to 'blank' entities and set the values of properties associated with the components. 

OBJ (or .OBJ) is a geometry definition file format first developed by Wavefront Technologies. This lesson teaches how to download Wavefront models and place them in the A-frame scene. 

WebVR - Using Waterfront models  design Virtual Reality websites as it gives the developer easy access to 3D models and A-frame gives the flexibility to use them as normal entities. With simple attributes, the models on the scene can be scaled, moved and rotated.

Basic animation can be run using <a-animation> tag. For basic animation, no script is required. It requires to set which attribute to animation e.g if position attribute is used to animate, the entity to which the animation is applied will move across the scene. If the rotation attribute is used, the entity will rotate.

Javascript can be used to dynamically generate the tags for entities and set attributes for those entities, and even update them, all from the browser. 

Javascript can be used between the <script> tage to update attributes on the aframe page similar to normal HTML. For example, Javascript can be used to add an event listener for 'click' to an entity and it can be scripted to do something when the click event occurs.

PHP is used as Server Side scripting. It is the language that is used to create dynamic pages at the Server. This lesson shows how to use PHP to dynamically create any A-frame entities. The simple example used here is to generate a series of similar entities but spaced out in the 3D scene.  

This lecture is a simple example of how 3D videos used in the background can be updated on the fly. 

Note: The codes were tested on Firefox and iOS, but it may not work on Chrome