Learn A-Frame And Get Ready For WebVR
4.6 (374 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,571 students enrolled

Learn A-Frame And Get Ready For WebVR

Design and prototype cross-platform virtual reality experiences
Bestseller
4.6 (374 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,571 students enrolled
Last updated 7/2020
English
English [Auto]
Current price: $139.99 Original price: $199.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 8 hours on-demand video
  • 25 articles
  • 54 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Understand the basic syntax
  • Use locomotion and teleportation
  • Transform the objects in your scene
  • Modify the controls
  • Modify the virtual environment
  • Load and play audio and video
  • Load and display 3D models
  • Compose and register components
  • Use standard and semantic animation
  • Use JavaScript to control entities
  • Interact with the objects
  • Test WebVR scenes on any device
Requirements
  • Keen interest in Virtual Reality
  • Willingness to learn new skills and technologies
  • Basic HTML and JavaScript coding knowledge is advantageous
  • Knowledge of 3D modeling would be an extra advantage, but is not essential
Description

*** NEWS 27 APRIL 2020 ***

The downloadable source code has been updated to the latest release v.1.0.4 for the following lectures:

  • Lecture 51 “Multiple entities component PART 1”

  • Lecture 52 “Multiple entities component PART 2”

The code update for the other lectures is currently work in progress!


*** INTRODUCTION ***

Welcome to my A-Frame course, where you will be learning how to create and test your first WebVR scenes on any device within a few hours!

Whatever area of design or development you work in, you have probably started getting your head around Virtual Reality for the Web (WebVR) and, if you haven't already, soon you will have to.

Indeed today the WebVR standard is incredibly well supported on phones and desktop computers for almost all major headsets.

It’s clearly time for all creatives to get on board!


*** ABOUT ME ***

I am a designer with coding skills, and some of my WebVR works won awards in competitions and hackathons in April 2018 and March 2019.

April 2018
My entry "Epic Medieval Battle” was announced as one of the 3 winners achieving the 3rd place in the “WebVR Medieval Fantasy Experience Challenge”, the contest organised by Mozilla and Sketchfab.

March 2019
Working in team with an AR developer, we merged WebVR and AR technology for context-aware remote placement of content on 3D maps and real-time visualisation in the real world. Our project won the Community Vote Award at #SCAPEHACK 2019, the first hackathon organised by Scape Technologies in London.

If you want to keep an eye on my WebVR activity you can follow me on Twitter: @theDart76

To view some of my WebVR works just visit my website and my WebVR playground (links in profile).


*** WHY TO ENROLL ***

This is the most complete and detailed A-Frame course you can find on Udemy, and its content is structured to introduce you to all the topics, from the most basic to the more advanced ones, in a logical progression.

In each lecture I explain the concepts with practical examples, which will allow you to see the theory in practice. If you would like to have an idea of my way of teaching, just have a look at the preview videos: you can watch the first 1 hour and 20 minutes of content for free!

Most importantly, I created this course in September 2017, when A-Frame was on v0.7.x, and since then I have kept it updated adding new content and information. Therefore you will have the opportunity to learn what has changed with its next releases that are v0.8.x and v0.9.x.

Last but not least, as you will find plenty of examples and chucks of code online (e.g. on Glitch, CodePen, Stack Overflow) this course will also allow you to understand why some projects and experiments created using older versions of A-Frame may not work correctly when using the latest release.


*** CONTENT ***

By enrolling in this A-Frame course, you will learn how to use the Mozilla web framework for building awesome cross-platform Virtual Reality experiences.

The course is structured to cover all the knowledge that you need to get started with A-Frame and be able to:

  • Understand the basic syntax

  • Transform the objects in your scene

  • Modify the virtual environment

  • Load and display 3D models

  • Use standard and semantic animation

  • Interact with the objects

  • Use locomotion and teleportation

  • Modify the controls

  • Load and play audio and video

  • Compose and register components

  • Use JavaScript to control entities

  • Test WebVR scenes on any device


*** ADD-ONS ***

For each lecture, you will be provided with the full source code that you can freely use as a template for your own projects.

The course also includes some extra valuable resources to provide you with:

  • Web links to resources used in the lectures

  • Web links to FREE 3D models and 3D modeling software

  • Web links to VR-related websites

Finally, this A-Frame course will be continuously updated with new content, projects, and resources, so you can think of it as a subscription to a never-ending supply of A-Frame training!


Who this course is for:
  • Web designers
  • Front-end web developers
  • Game designers
  • Game developers
  • 3D artists
  • VR enthusiasts
  • People who would like to learn about new trends and technologies
Course content
Expand all 79 lectures 08:00:26
+ Modifying The Virtual Environment
7 lectures 01:26:37
Ground
03:58
Sky and 360° image
08:59
Camera primitive
11:27
Loading and displaying 3D models
13:44
Animating objects
15:22
Adding lights and shadows
16:57
The A-Frame inspector
16:10
+ Interacting With The Objects
6 lectures 01:01:07
Cursor primitive and component
07:51
Event-set component
09:08
Gaze-based interactions
07:52
Selective intersections
09:26
Controller-based interactions
18:13
Interaction gestures
08:37
+ Enhancing The Virtual Environment
6 lectures 40:34
Physics and collisions
10:58
Sound and positional audio
11:46
Video
04:37
360° Video
05:06
Stereoscopic images
06:39
Antialiasing
01:28
+ Enhancing The Interactions
4 lectures 28:43
Semantic animation
04:02
Animation component
09:01
Text component
09:55
Look-At component
05:45
+ Moving Around In The Virtual Environment
9 lectures 01:03:57
VR locomotion and its limitations
05:57
Smooth artificial locomotion
06:58
Movement controls component
04:47
Navigation meshes
09:11
Dynamic FOV reduction
09:07
On-rails locomotion
10:32
On-rails dynamic FOV reduction
02:04
Instant and blink teleportation
06:41
Free teleport locomotion
08:40
+ Controlling Entities Programmatically
10 lectures 01:33:24
Why registering components
07:36
The .init() handler
04:00
Using the Schema
05:09
The .update() handler
11:55
The .tick() handler
09:52
Blink teleportation component PART 1
12:08
Blink teleportation component PART 2
08:12
Entity spawner component
09:49
Multiple entities component PART 1
13:03
Multiple entities component PART 2
11:40
+ Testing Your WebVR Scenes On VR Headsets
4 lectures 13:53
Using Glitch
04:23
Installing and using a web server
04:59
Installing and using ngrok
03:56
NOTE Camera offset on mobile devices
00:35