Learn A-Frame And Get Ready For WebVR

Enroll in my course! Get access to more than 8 hours of content to learn how to create and test your WebVR scenes on any device!

Who This Course Is For

  • Web designers
  • Front-end web developers
  • Game designers
  • Game developers
  • 3D artists
  • Educators
  • VR enthusiasts
  • People who would like to learn about new trends and technologies

What You Will Be Learning

A-Frame Basics

  • What is A-Frame
  • Installation and testing

Adding And Modifying HTML Elements

  • Basic primitives and HTML attributes
  • Position and relative positioning
  • Rotation and relative rotation
  • Scale, relative scale, and reflection
  • Image textures and materials
  • Image and curved image primitives
  • Breaking primitives down

Modifying The Virtual Environment

  • Ground
  • Sky and 360° image
  • Camera primitive
  • Loading and displaying 3D models
  • Animating objects
  • Adding lights and shadows
  • The A-Frame Inspector

Interacting With The Objects

  • Cursor primitive and component
  • Event-set component
  • Gaze-based interactions
  • Selective intersections
  • Controller-based interactions
  • Interaction gestures

Enhancing The Virtual Environment

  • Physics and collisions
  • Sound and positional audio
  • Video
  • 360° Video
  • Stereoscopic images
  • Antialiasing

Enhancing The Interactions

  • Semantic animation
  • Animation component
  • Text component
  • Look-At component

Moving Around In Virtual Reality

  • VR locomotion and its limitations
  • Smooth artificial locomotion
  • Movement controls component
  • Navigation meshes
  • Dynamic FOV reduction
  • On-rails locomotion
  • On-rails dynamic FOV reduction
  • Instant and blink teleportation
  • Free teleport locomotion

Controlling Entities Programmatically

  • Why registering components
  • The .init() handler
  • Using the Schema
  • The .update() handler
  • The .tick() handler
  • Blink teleportation component PART 1
  • Blink teleportation component PART 2
  • Entity spawner component
  • Multiple entities component PART 1
  • Multiple entities component PART 2

Testing Your WebVR Scenes On VR Headsets

  • Using Glitch
  • Installing and using a web server
  • Installing and using ngrok
  • NOTE Camera offset on mobile

A-Frame v0.8.x - What Has Changed

  • Camera height offset
  • Sky color
  • Color correction for glTF 3D models

A-Frame v0.9.x - What Has Changed

  • Animation
  • Antialias
  • Sound

A-Frame v1.0.x - What Has Changed

  • Introduction

Updates On Components

  • The A-Frame animation system
  • The new super-hands component


Why To Enroll

This is the most complete and detailed A-Frame course you can find on online, 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.

Moreover, when I created this course back in September 2017, A-Frame was on v0.7.x. Since then, I have updated the course by adding new content and information to allow the students to learn what has changed with A-Frame's next releases (v0.8.x, v0.9.x, and v1.0.x).

Therefore, as you will find plenty of examples and snippets 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.


For each lecture, you will be provided with:

  • Source code of all the lessons updated to A-Frame v1.0.4
  • Web links to resources used in the lectures (textures and 3D models)
  • Web links to FREE 3D models and 3D modelling software
  • Web links to VR-related websites

Use this month's coupon code THEWEBVRLAB_JUL2022 to get my course for £18.99 (76% off!).