Intro to AR on the Web
- Buy now
- Learn more
- Course description
- Code and sample apps
Introduction to WebXR

Intro to the course
Your first experience with web AR on mobile iOS
Your first experience with web AR on mobile Android
Your first experience with web AR on desktop
The WebXR API

What is the WebXR API?
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
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
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

Your first experience with web AR on desktop

UPDATE MAY 2022: The newest version of Three.js seems to have broken the "right click tap" on the extension in this cones example. Please use this link alternatively to test out: https://threejs-webxr.glitch.me/.

Links: