Login
WebXR Academy/Intro to AR on the Web
Buy now

  • $19

Intro to AR on the Web

  • Course
  • 30 Lessons

Introduction to augmented reality on the web using Three.js and WebXR.

Learn to create simple AR experiences, manage user interactions, and animate 3D models and objects. Take a peek by watching our preview videos.

Buy now

Course description

Augmented reality has the potential to become massively adopted on the web, where users don’t have to download apps or make sure they have the latest hardware. WebXR is one of the newest, official web APIs that allows developers to create VR and AR experiences using Javascript. Don’t miss out on being one of the first developers to be well-versed in a technology that will be all over the web soon. Within less than an hour you could be creating your own AR experiences on the web!

Learning goals:

By the end of this course you will know the basics of how to create simple augmented reality experiences on the web and a basic understanding of how to design and code 3D experiences.  Specifically you will learn how to:
  • Create basic AR apps on the web using WebXR
  • Use a powerful 3D library called Three.js used by millions of applications on the web
  • Load and display 3D objects and models in AR
  • Animate objects and models
  • Positioning and rotation in AR
  • Work with different types of 3D models
  • Use touch gestures to provide interactivity
  • Convert any Three.js application into an AR app
  • Test WebXR experiences on your desktop, iOS, or Android devices
Subtitles:

  • English closed captions have been manually transcribed and are high quality.
  • Subtitles also in Spanish and Portuguese. If you'd like subtitles in another language just email us!

Lectures

Course description
Preview
Code and sample apps

Introduction to WebXR

Intro to the course
Preview
Your first experience with web AR on mobile iOS
Your first experience with web AR on mobile Android
Preview
Your first experience with web AR on desktop
Preview

The WebXR API

What is the WebXR API?
Preview
What are the benefits of AR on the web?
How does WebXR work?
What is Three.js?
WebXR application lifecycle

Coding Your First WebXR AR App

 
Setting up the developer environment and code examples
Creating a basic Three.js scene
Adding a camera to the scene
Adding a renderer to the scene
Adding a cube to the scene
Creating an animation loop
Three.js coordinate system
Adding a light to the scene
Adding a more complex shape to the scene
Converting the scene to AR using WebXR
Preview

3D Models in AR

 
Adding 3D objects to the scene
Animating 3D objects
Adding a 3D model to the scene
Animating a 3D model

Interactions in AR

 
Adding touch gestures
Hit testing part 1 - Setup
Preview
Hit testing part 2 - Hit test source and reference spaces
Hit testing part 3 - Placing a reticle on a surface
Hit testing part 4 - Placing virtual objects on surfaces

Code samples

On top of the video lectures, the course includes the following code samples:
  • Creating a basic Three.js scene
  • Adding WebXR to the basic scene
  • Adding 3D objects to the scene
  • Animating 3D objects
  • Adding a 3D model to the scene
  • Animating a 3D model
  • Touch gestures
  • Hit Testing with reticle
  • Advanced hit testing

Testimonials

Don't take our word for it! See what other students have said.

Interested in gifting this course?

You can gift this course by purchasing a gift certificate version.
Gift Certficate

Be the first to know!

Get course updates, discounts, and more by joining our newsletter.

You're signing up to receive emails from WebXR Academy