Tutorialspoint

Celebrating 11 Years of Learning Excellence! Use: TP11

Learn to create WebXR, VR and AR, experiences using Three.JS

person icon Nicholas Lever

4.7

Learn to create WebXR, VR and AR, experiences using Three.JS

Harness the WebXR API and Three.JS to bring immersive experiences, VR and AR, to the browser, including Oculus Quest

updated on icon Updated on Jun, 2025

language icon Language - English

person icon Nicholas Lever

English [CC]

category icon Development ,Data Science,

Lectures -47

Resources -1

Duration -5 hours

Lifetime Access

4.7

price-loader

Lifetime Access

30-days Money-Back Guarantee

Training 5 or more people ?

Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.

Course Description

WebXR brings both VR and AR to the browser. The API has the massive forces of Google and Amazon behind it, so it looks like immersive experiences, using only a browser, are going to make a huge impact in the near future. WebXR works great with Oculus headsets, including the Oculus Quest 2, and the Chrome Android browser is already supporting the API for both AR (augmented reality) and VR (virtual reality) experiences. However, WebXR only harnesses the sensors on a mobile device and creates an agreed-upon definition of how to use this data. To actually visualize 3D content, you need a WebGL library, and there is no better one to use than Three.JS. This mature open-source library has many users around the globe and is supported by many developers. Three.JS is at version 118 at the time of writing and is a robust, production-ready library. Recently, WebXR support was added to the library. Making it easy for developers to create immersive experiences.

In this course, you'll learn how easy it is to use Three.JS, to create VR and AR experiences. To get the most from the course, you will need to be comfortable with JavaScript coding. No other prerequisites are required.

The course is split into 10 sections.

  1. Introduction - I introduce the history of WebXR, give you a basic primer for those of you new to 3D concepts, and show you the Three.JS website and the WebXR examples.

  2. A Three.JS Primer is for Three.JS novices to bring you up to speed on the library.

  3. An introduction to WebXR using Three.JS - we look in earnest at your development environment and create our first WebXR examples.

  4. Using complex assets with Three.JS Most things you create for immersive experiences will need complex assets, and sourcing, editing, loading, and working with them is the subject of Section 4.

  5. The WebXR API - gives a review of the WebXR API.

  6. Creating an Architectural Walkthrough - In section 6, we start to create real-world examples of immersive content with an architectural walk-through.

  7. Placing a Product in a Room - WebXR lends itself to showing real products in a person’s home and that is the topic for section 7.

  8. Using WebXR for games - VR is perfect for games and we look at the basic ingredients of a game using WebXR in this section.

  9. Using WebXR for training - covers the important topic of using VR for training.

  10. Conclusion- We look at some WebXR examples to inspire you and review what you’ve learned.

The only tool you'll need is a code editor. In the course, I use Brackets, freely available online. The course includes comprehensive resources and code examples. Each code example comes with two versions, one for you to code along with and another that is complete in case you hit a problem. I show you how to use GitHub to host your development work on a secure server so you can easily test your work on a headset, such as an Oculus Quest

It’s going to be fun.

You get a 30-day money-back guarantee, so you've got nothing to lose. Go virtual today.

Goals

  • How to easily create VR and AR apps that work in the browser
  • How to use the ThreeJS library to create these apps
  • How to handle controllers
  • How to replace the controllers with custom models
  • How to create architectural walk-throughs, games, and training apps.
  • How to add an in-world UI
  • Developing AR apps that support real-world hit testing
  • Learn game VR techniques such as teleporting and interacting with models in the scene using controllers.

Prerequisites

  • Intermediate-level JavaScript ability is assumed
Learn to create WebXR, VR and AR, experiences using Three.JS

Curriculum

Check out the detailed breakdown of what’s inside the course

Introduction

4 Lectures
  • play icon Welcome to the course 03:40 03:40
  • play icon The history of WebXR 06:09 06:09
  • play icon A 3D Primer 05:11 05:11
  • play icon The THREE js Examples 06:14 06:14

A THREE.js Primer

6 Lectures
Tutorialspoint

Introducing WebXR with THREE.js

13 Lectures
Tutorialspoint

Using complex assets with THREE.js

4 Lectures
Tutorialspoint

The WebXR API

3 Lectures
Tutorialspoint

Creating an architectural walk-through

4 Lectures
Tutorialspoint

Fun with AR

3 Lectures
Tutorialspoint

A VR Game

3 Lectures
Tutorialspoint

VR for training

3 Lectures
Tutorialspoint

Progressive Web Apps (PWA)

3 Lectures
Tutorialspoint

Conclusion

1 Lectures
Tutorialspoint

Instructor Details

Nicholas Lever

Nicholas Lever

After getting a degree in Graphic Design, I started work in 1980 as a cartoon animator. Buying a Sinclair ZX81 back in 1982 was the start of a migration to a full time programmer. The ZX81 was quickly swapped for the Sinclair Spectrum, a Z80 processor and a massive 48K of ram made this a much better computer to develop games. I developed a few games using Sinclair Basic and then Assembler. The Spectrum was swapped for a Commodore Amiga and I developed more games in the shareware market, moving to using C. At this stage it was essentially a hobby. Paid work was still animated commercials. 

I finally bought a PC in the early nineties and completed an Open University degree in Maths and Computing. I created a sprite library ActiveX control and authored my first book, aimed at getting designers into programming. In the mid nineties along came Flash and the company I was now running, Catalyst Pictures, became known for creating games. 

Since then the majority of my working life has been creating games, first in Flash and Director, as Director published the first widely available 3D library that would run in a browser using a plugin. 

In recent years game development has involved using HTML5 and Canvas. Using both custom code and various libraries. A particular preference is to use the latest version of Adobe Flash, now called Animate that exports to the Javascript library Createjs. 

I've worked for the BBC. Johnson and Johnson. Deloitte, Mars Corporation and many other blue chip clients. The company I've run for over 30 years has won a number of awards and been nominated for a BAFTA twice, the UK equivalent to the Oscar. 

Over the last 20 years I have been struck by just how difficult it has been to get good developers and have decided to do something about this rather than just complain. I run a CodeClub for kids 9-13 years old and I'm developing a number of courses for Tutorialspoint hoping to inspire and educate new developers. Most of my courses involve real-time 3d either using the popular Open Source library Three.JS or Unity. I'm currently having a lot of fun developing WebXR games and playing with my Oculus Quest.

Course Certificate

Use your certificate to make a career change or to advance in your current career.

sample Tutorialspoint certificate

Our students work
with the Best

Related Video Courses

View More

Annual Membership

Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses

Subscribe now
Annual Membership

Online Certifications

Master prominent technologies at full length and become a valued certified professional.

Explore Now
Online Certifications

Talk to us

1800-202-0515