classicmatsuo / WebXRWorkshop

FrontEndMasters 3D on the Web & WebXR Workshop

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

You can run this repo by clicking green code button and choosing "open with CodeSpaces" from the dropdown. With CodeSpaces, you can run Visual Studio Code on your browser and code from anywhere. Sign up for CodeSpaces Beta and see the video for details.

If you want to setup your own local environment follow the steps here:

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