Learn A-frame to build VR Websites
3.7 (51 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
332 students enrolled
Wishlisted Wishlist

Please confirm that you want to add Learn A-frame to build VR Websites to your Wishlist.

Add to Wishlist

Learn A-frame to build VR Websites

How to build Virtual Reality Websites with A-frame easily
3.7 (51 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
332 students enrolled
Last updated 8/2017
English
Curiosity Sale
Current price: $10 Original price: $180 Discount: 94% off
30-Day Money-Back Guarantee
Includes:
  • 2.5 hours on-demand video
  • 5 Supplemental Resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Create scenes in A-Frame
  • Use A-frame with HTML, PHP and Javascript
View Curriculum
Requirements
  • Knowledge in Basic HTML would be a definite advantage but not essential
  • Knowledge in PHP & Javascript would be an advantage but not essential
Description

Introduction

According to Techcrunch recent article in June 2016, Virtual Reality (VR) is the next big thing. Facebook also made the bold move to acquire Occulus Rift, which is a company that designs VR headsets, for a staggering $2 billion. All data indicate that VR is the next big wave of change in the Media landscape. We've witnessed an exponential growth in availability of apps in the decade following commercial production of tablets and smart mobile phones. We can foresee that in the next decade, innovation in VR will also grow exponentially and websites will have a VR version that will allow users to view from their mobile devices+headset. As the hardware is currently getting more popular and sales are on the rise, there will be a demand for VR online applications. 

Content 

The course was designed to teach the students about the latest technology for developing VR websites and the easiest way to make a start in designing such websites. The easiest technology that a developer or a newbie to use to make VR websites is the A-frame, developed by Mozilla. Although this technology is at an early stage, it is slowly gaining popularity. But it would require more developers to use it and build websites with the technology in order to further develop a systematic design methodology.

The first section is about using A-Frame and building on various tags to give the student to knowledge and skills to understand and use varioius objects on a VR scene. In the next sections , you will learn simple animations and use of cursors. 

This will be followed by lectures on how to use Javascript and PHP with A-frame.

The course ends with simple projects such a Multicolored bubbles, Interactive Hotel rooms view and VR shopping page.

Who is the target audience?
  • Job-seekers who are looking for job as Web Designers and who would like to add new skills to their CV
  • Web Designers who would like to code commercial VR websites
  • Those who have interests in Virtual Reality products
  • Web Designers who would like to add cool sites to their portfolio
Students Who Viewed This Course Also Viewed
Curriculum For This Course
35 Lectures
02:34:20
+
Introduction
1 Lecture 03:13

Summary of the contents of this course

Preview 03:13
+
Working with Objects
17 Lectures 59:09

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.

Preview 04:03

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.

Change the Color and Use Image as material
03:46

To revis about Basic A-frame Syntaxes

Basic Syntax
2 questions

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.

Background
03:25

Background
1 question

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.

Opacity
02:14

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

Sphere & Ring
02:34

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

Tetrahedron, Octahedron, Torus
02:06

Test about Object Primitives

Object Primitives
1 question

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

Position attribute
04:10

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.
 

Rotation attribute
03:55

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.

Scale attribute
03:48

Questions related to Position, Scale and Rotation

Position, Scale and Rotation
3 questions

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.

Assets Management System
03:31

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.

Using a Video as Material
03:25

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.

Curved Surfaces
02:31

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.

A Plane and how to display a Video or Image on it
02:36

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.

Set a Video as Background
02:28

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

An Entity with Geometry and Material
03:38

Normally primitives and entities use a combination of component properties and a lot of times, component properties are common between entities. A-frame Mixins can be used to define component properties for the purpose of reusing them using their id's.
Mixins
06:18

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.

Working with Waterfront Models
04:41
+
Animation and Cursors
4 Lectures 20:29

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.

Basic Animation
05:04

Animation with Component Properties
02:54

Cursors
08:01

Cursors with Visual Feedback
04:30
+
A-frame with Javascript
5 Lectures 20:27

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. 

Using Javascript to generate A-frame entities
04:00

Generate entities in a loop using Javascript
03:09


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.

Using Javascript to interact with entities
03:56

Register a component
05:37
+
A-frame with PHP
1 Lecture 07:45

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.  

Generate objects with PHP loop
07:45
+
Project 1 - Design a VR page with colorful moving bubbles
1 Lecture 06:32
Designing the Bubbles
06:32
+
Project 2 - Design a 3D interactive Hotel rooms viewing page
2 Lectures 11:50

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

Coding the VR page
08:57

+
Project 3 - Shopping Page
4 Lectures 24:55
Shopping Page - Part 1
05:33

Shopping Page - Part 2
05:06

Shopping Page - Part 3
08:59

Shopping Page - Part 4
05:17
About the Instructor
M Ajmir GOOLAM HOSSEN
3.8 Average rating
91 Reviews
829 Students
6 Courses
Instructor, Technologist, Entrepreneur

Ajmir has been an electronics/programming/science hobbyist since the age of 12 and obtained his Bachelor in Electronics and Communication Engineering from the University of Mauritius in the year 2001.

After graduation he attended a short course in Web Design, where he learned HTML, PHP and Java.

He has worked at various positions in the Electronics Industry, including Sales Engineer for electronic instruments, Lecturing in Power Electronics and Data Communication, Test Engineer and Debugging boards for UK Road Signs.

Ajmir worked for nearly 7 yrs at Xilinx in Dublin, Ireland as a Product Applications Engineer, supporting Xilinx FPGA Design Automation Software tools. He became a specialist in Synthesis tools/Timing Analysis at Xilinx. He also worked with Digital Signal Processing on FPGA. While at Xilinx he had the chance to meet very interesting people in the industry and attended various courses. He was privileged to have provided support to major companies in the Electronics Industry and has been in touch with real life electronics designs.

Since 2013 he got curious and grew interested in building commercial Online Applications and completed a BSc in Digital Technology at the Digital Skills Academy in Dublin.

Ajmir is interested in Mathematical Modelling, Science, Arts and Philosophy.

He is passionate about imparting knowledge to others.