Autoplay
Autocomplete
Previous Lesson
Complete and Continue
Learn to create WebXR, VR and AR, experiences using Three.JS
Introduction
Welcome to the course (3:40)
Setting up a secure web server
The history of WebXR (6:09)
A 3D Primer (5:11)
The THREE.js Examples (6:14)
What have you learned?
A THREE.js Primer
Setting up a simple THREE.js page using modules (6:11)
Creating a rotating Cube (9:59)
The THREE.js editor (7:36)
Geometries (6:30)
Materials (5:54)
Loaders (6:45)
What have you learned?
Introducing WebXR with THREE.js
Converting a standard THREE.js web app to use WebXR (5:24)
Customising the VRButton (11:38)
Adding user interaction with a controller device (7:40)
Adding a button press event to the controller (9:18)
Creating a custom controller (6:40)
Accessing the gamepad (9:57)
Moving around a VR world (8:13)
Physics in your VR world (12:17)
Creating an AR experience (6:41)
Controllers in an AR app (7:17)
Touch gestures in an AR app (10:17)
Hit testing in AR (9:29)
Hand-tracking on the Oculus Quest (6:15)
What have you learned?
Using complex assets with THREE.js
Finding assets online (6:18)
Using Mixamo to setup character animations (2:54)
Using Blender to export assets (3:59)
Using the THREE.js animation system (7:38)
What have you learned?
The WebXR API
XRSystem and XRSession (3:55)
XRFrame and XRSpace (3:25)
XRInputSource (5:10)
What have you learned?
Creating an architectural walk-through
Moving around an environment (6:22)
Interacting with objects in the scene (6:58)
Using a GazeController (3:23)
Making the app functional on a none XR device (4:02)
What have you learned?
Fun with AR
Using AR to create a tape measure (10:58)
Adding dynamic animation to a product (4:15)
An AR online shop example (8:12)
What have you learned?
A VR Game
Movement by teleporting (6:22)
Interacting with meshes (5:49)
Using a controller as a weapon (8:59)
What have you learned?
VR for training
CanvasUI - part 1 (6:17)
CanvasUI - part 2 (3:37)
Using CanvasUI for training (8:52)
What have you learned?
Conclusion
WebXR examples, articles, videos and repos to inspire and inform you
Bonus Lecture
Converting a standard THREE.js web app to use WebXR
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock