A-Frame Free Introductory Classes

Learn how to create cross-platform VR experiences that run in the browser. Almost 3 hours of free content from my A-Frame course!

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

TAKE MY FREE COURSE

Looking For More WebVR Content?

Then you might be interested in my my course Learn A-Frame And Get Ready For WebVR, which will give you more than 5 hours of extra content, access to the downloadable source code updated to the latest release v0.9.2 for all the lectures, and my support in the Q/A section.

Advanced Topics Included In The Full Course

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

Updates On Components

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

READ MORE ABOUT MY COURSE