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

Enroll in My Course

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.

Add-Ons

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