3D on the Web & WebXR Device APIs

This repository is created for FrontEndMasters 3D on the Web & WebXR course.

WebXR Gitbook: www.learnwebxr.dev

Course Outline

• Introduction to 3D on the Web & WebXR
• 3D Libraries
  • Creating a 3D Scene Using Babylon.js
  • Babylon.ks Practice & Libraries Q&A
  • Creating a scene using ThreeJS
  • Creating a scene using A-Frame
  • 3D Libraries Discussion & Resources
• Building 3D Scenes
  • Using the ThreeJS Editor
  • Creating a local development environment
  • Animated 3D Earth Scene
  • Animated Clouds Exercise
  • Animated Clouds Solution
• Virtual & Augmented Reality(VR/AR)
  • AR HoloLens 2 Demo
  • Creating a VR Scene
  • Creating an AR Scene
  • Using AR Hittest
  • Loading Models
  • Loading models exercise
  • Accessibility
• Resources

Installing

1. Clone Repository

git clone https://github.com/Yonet/WebXRWorkshop.git

2. CD into folder

cd WebXRWorkshop

3. Install TypeScript

npm install -g typescript

4. Install dependencies

npm install

5. Start it

npm run dev

6. Visit http://127.0.0.1:3000/

7. Edit project in VSCode

code .

8. To get an HTTPS connection, run

npm install ngrok
ngrok http 3000

9. Check the Forwarding ... https: line and visit the link