Learn AFrame And Get Ready For WebVR

Design and prototype cross-platform virtual reality experiences
Learn AFrame And Get Ready For WebVR
File Size :
4.98 GB
Total length :
8h 1m



Danilo Pasquariello


Last update




Learn AFrame And Get Ready For WebVR

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

Learn AFrame And Get Ready For WebVR


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


*** NEWS 08 JUL 2023 ***I have added the new Section 17 – Immersive Web Emulator to the course, which includes a 7-step tutorial about this useful tool developed by Meta Reality Labs to test your WebXR scenes without a physical XR device.Moreover, the downloadable source code has been updated to the latest release v1.4.2 for the following lectures:Lecture 43 “Why registering components”Lecture 44 “The .init() handler”Lecture 45 “Using the Schema”Lecture 46 “The .update() handler”Lecture 47 “The .tick() handler”Lecture 48 “Blink teleportation component PART 1″Lecture 49 “Blink teleportation component PART 2″Lecture 50 “Entity spawner component”Lecture 51 “Multiple entities component PART 1”Lecture 52 “Multiple entities component PART 2”*** INTRODUCTION ***Welcome to my A-Frame course, where you will be learning how to create and test your first WebVR scenes on any device (Desktop and VR headsets) 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 WebXR 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 2018My 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 2019Working 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 WebXR activity, you can follow me on Twitter: @theDart76To view some of my WebXR works just visit my website (link 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, allowing you to see the theory in practice. If you would like to have an idea of my way of teaching, 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.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 syntaxTransform the objects in your sceneModify the virtual environmentLoad and display 3D modelsUse standard and semantic animationInteract with the objects (on Desktop and XR headsets)Use locomotion and teleportationModify the controlsLoad and play audio and videoCompose and register componentsUse JavaScript to control entitiesTest 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 lecturesWeb links to FREE 3D models and 3D modeling softwareWeb links to VR-related websitesFinally, 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!


Section 1: Introduction To The Course

Lecture 1 The most important lecture

Section 2: A-Frame Basics

Lecture 2 What is A-Frame?

Lecture 3 Installation and testing

Section 3: Adding And Modifying HTML Elements

Lecture 4 Basic primitives and HTML attributes

Lecture 5 Position and relative positioning

Lecture 6 Rotation and relative rotation

Lecture 7 Scale, relative scale, and reflection

Lecture 8 Image textures and materials

Lecture 9 Image and curved image primitives

Lecture 10 Breaking primitives down

Section 4: Modifying The Virtual Environment

Lecture 11 Ground

Lecture 12 Sky and 360° image

Lecture 13 Camera primitive

Lecture 14 Loading and displaying 3D models

Lecture 15 Animating objects

Lecture 16 Adding lights and shadows

Lecture 17 The A-Frame inspector

Section 5: Interacting With The Objects

Lecture 18 Cursor primitive and component

Lecture 19 Event-set component

Lecture 20 Gaze-based interactions

Lecture 21 Selective intersections

Lecture 22 Controller-based interactions

Lecture 23 Interaction gestures

Section 6: Enhancing The Virtual Environment

Lecture 24 Physics and collisions

Lecture 25 Sound and positional audio

Lecture 26 Video

Lecture 27 360° Video

Lecture 28 Stereoscopic images

Lecture 29 Antialiasing

Section 7: Enhancing The Interactions

Lecture 30 Semantic animation

Lecture 31 Animation component

Lecture 32 Text component

Lecture 33 Look-At component

Section 8: Moving Around In The Virtual Environment

Lecture 34 VR locomotion and its limitations

Lecture 35 Smooth artificial locomotion

Lecture 36 Movement controls component

Lecture 37 Navigation meshes

Lecture 38 Dynamic FOV reduction

Lecture 39 On-rails locomotion

Lecture 40 On-rails dynamic FOV reduction

Lecture 41 Instant and blink teleportation

Lecture 42 Free teleport locomotion

Section 9: Controlling Entities Programmatically

Lecture 43 Why registering components

Lecture 44 The .init() handler

Lecture 45 Using the Schema

Lecture 46 The .update() handler

Lecture 47 The .tick() handler

Lecture 48 Blink teleportation component PART 1

Lecture 49 Blink teleportation component PART 2

Lecture 50 Entity spawner component

Lecture 51 Multiple entities component PART 1

Lecture 52 Multiple entities component PART 2

Section 10: Testing Your WebVR Scenes On VR Headsets

Lecture 53 Using Glitch

Lecture 54 Installing and using a web server

Lecture 55 Installing and using ngrok

Lecture 56 NOTE Camera offset on mobile devices

Section 11: A-Frame v0.8.x – What Has Changed

Lecture 57 Introduction

Lecture 58 Camera Height Offset (ECS Syntax)

Lecture 59 Sky color

Lecture 60 Color correction for glTF 3D models

Section 12: A-Frame v0.8.x – Know Issues

Lecture 61 Introduction

Lecture 62 Camera moves slowly on Chrome

Lecture 63 Raycaster bug

Lecture 64 Sound component not playing audio asset across multiple entities

Lecture 65 Best practices for color space management

Section 13: A-Frame v0.9.x – What Has Changed

Lecture 66 Introduction

Lecture 67 Animation

Lecture 68 Antialias

Lecture 69 Sound

Section 14: A-Frame v1.0.x – What Has Changed

Lecture 70 Introduction

Section 15: Updates On Components

Lecture 71 Introduction

Lecture 72 The A-Frame animation system

Lecture 73 The new super-hands component v3.0.0

Lecture 74 The new look-at component v0.8.x

Section 16: Resources For Your WebVR Projects

Lecture 75 Brackets Live Preview tutorial

Lecture 76 Web links to resources used in the lectures

Lecture 77 Web links to FREE 3D models and 3D modeling software

Lecture 78 Web links to VR-related websites

Section 17: Immersive Web Emulator

Lecture 79 Testing your WebXR scenes without a physical XR device

Section 18: START-END CODE Of All Lectures

Lecture 80 Introduction and downloadable file

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 Information:

Udemy | English | 8h 1m | 4.98 GB
Created by: Danilo Pasquariello

You Can See More Courses in the Design >> Greetings from CourseDown.com

New Courses

Scroll to Top