Intro to Augmented Reality on the Web: WebXR and Three.js
INTRODUCTION
Augmented reality has the potential to become massively adopted on the web, where users don’t have to download apps or make sure they have the latest hardware. WebXR is one of the newest, official web APIs that allows developers to create VR and AR experiences using Javascript.
Don’t miss out on being one of the first developers to be well-versed in a technology that will be all over the web soon. Within less than an hour you could be creating your own AR experiences on the web!
CONTENT
By the end of this course you will know the basics of how to create simple augmented reality experiences on the web and a basic understanding of how to design and code 3D experiences. Each lecture includes sample code and external link examples to support your learning.
Specifically you will learn how to:
Create basic AR apps on the web using WebXR
Use a powerful 3D library called Three.js used by millions of applications on the web
Load and display 3D objects and models in AR
Animate objects and models
Positioning and rotation in AR
Work with different types of 3D models
Use touch gestures to provide interactivity
Convert any Three.js application into an AR app
Test WebXR experiences on your desktop, iOS, or Android devices
PREREQUISITES
While you will find it useful to have some previous Javascript and web programming knowledge, the class can be followed by absolute beginners as the coding environment is simple and the code examples are set up with many comments and explanations. If you don’t know anything about 3D environments, augmented reality, Three.js or WebXR then this class is for you.
While you can prototype WebXR using any desktop computer, to simulate real mobile AR you want to have either an iOS device that supports ARKit (most phones or iPads after 2017) or an Android device that supports ARCore (most phones after 2016).
VIDEOS
1.1.Intro to the course
1.2.Your first experience with web AR on mobile iOS
1.3.Your first experience with web AR on mobile Android
1.4.Your first experience with web AR on desktop
2.1.What is the WebXR API?
2.2.What are the benefits of AR on the web?
2.3.How does WebXR work?
2.4.What is Three.js?
2.5.WebXR application lifecycle
3.1.Setting up the developer environment and code examples
3.2.Creating a basic Three.js scene
3.3.Adding a camera to the scene
3.4.Adding a renderer to the scene
3.5.Adding a cube to the scene
3.6.Creating an animation loop
3.7.Three.js coordinate system
3.8.Adding a light to the scene
3.9. Adding a more complex shape to the scene
3.10.Converting the scene to AR using WebXR
4.1.Adding 3D objects to the scene
4.2. Animating 3D objects
4.3.Adding a 3D model to the scene
4.4.Animating a 3D model
5.1.Adding touch gestures
5.2.Hit testing part 1
5.3.Hit testing part 2
5.4.Hit testing part 3
5.5.Hit testing part 4
MORE COURSES
Check out our other courses at: https://webxracademy.com/