WebVR Tutorials

Here you will find free tutorials to get started with WebVR design and prototyping using A-Frame.

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 (Premium Content)

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

Enhancing The Virtual Environment (Premium Content)

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

Enhancing The Interactions (Premium Content)

Semantic animation
Animation component
Text component
Look-At component
Stereoscopic images
Antialiasing

Moving Around In Virtual Reality (Premium Content)

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 (Premium Content)

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 (Premium Content)

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 (Premium Content)

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

A-Frame v0.9.x - What Has Changed (Premium Content)

Animation
Antialias
Sound

Updates On Components (Premium Content)

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