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

Course content links

• lecture2_1  start  complete
• lecture2_2  start  complete
• lecture2_3  complete
• lecture2_4  start  complete
• lecture2_5  start  complete
• lecture2_6  start  complete
• lecture3_1  start  complete
• lecture3_2  start  complete
• lecture3_3  start  complete
• lecture3_4  start  complete
• lecture3_5  start  complete
• lecture3_6  start  complete
• lecture3_7  start  complete
• lecture3_8  start  complete
• lecture3_9  start  complete
• lecture3_10  start  complete
• lecture3_11  start  complete
• lecture3_12  start  complete
• lecture3_13  start  complete
• lecture4_4  start  complete
• lecture5_3  complete
• lecture6_1  start  complete
• lecture6_2  start  complete
• lecture6_3  start  complete
• lecture6_4  start  complete
• lecture7_1  start  complete
• lecture7_2  start  complete
• lecture7_3  start  complete
• lecture8_1  start  complete
• lecture8_2  start  complete
• lecture8_3  start  complete
• lecture9_3  start  complete

CanvasUI

• Hello World
• Header|Main|Footer
• Custom shaped body
• Buttons
• Scrolling
• Images
• Keyboard

Dev

• HTML Mixer
• Hand tracking input - Oculus Quest only
• Hand tracking simple - Oculus Quest only
• RingProgressMesh
• Unproject
• Euler
• TeleportMesh
• Chair

Mozilla Examples - Only works in the iOS Viewer

• Example 1 - Mozilla Simple AR - only works in ios viewer app
• Example 2 - Mozilla Detect World Geometry - only works in ios viewer app

Useful links

• three-mesh-ui
• WebXR Samples

Three.JS Examples

• AR - Cones
• AR - HitTest
• AR - Paint
• VR - Ball Shooter
• VR - Dragging
• VR - Panorama
• VR - Panorama Depth
• VR - Paint
• VR - Rollercoaster
• VR - Sculpt
• VR - Video
• VR - Hand Input
• VR - Hand Input - Cubes
• VR - Hand Input - Profiles