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
Using the THREE.js animation system
Lesson content locked
If you're already enrolled,
you'll need to login
.
Enroll in Course to Unlock