Learn A-Frame And Get Ready For WebVR

Enroll in my course! More than 8 hours of content to learn how to create and test your WebXR 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

Why to Enroll

This is the most complete and detailed A-Frame course you can find 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, allowing you to see the theory in practice.

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.

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.


For each lecture, you will be provided with:

  • Downloadable source code of all the lessons that you can use as templates
  • 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

Contact Info

Scotland, UK
+44 7802 321045

Get in Touch