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

Harness the WebXR API and Three.JS to bring immersive experiences, VR and AR, to the browser, including Oculus Quest

4.33 (513 reviews)
Udemy
platform
English
language
Web Development
category
instructor
Learn to create WebXR, VR and AR, experiences using Three.JS
5,770
students
5.5 hours
content
Oct 2023
last update
$64.99
regular price

What you will learn

How to easily create VR and AR apps that work in the browser

How to use the ThreeJS library to create these apps

How to handle controllers

How to replace the controllers with custom models

How to create architectural walk-throughs, games and training apps.

How to add an in world UI

Developing AR apps that support real world hit testing

Learn game VR techniques such as teleporting and interacting with models in the scene using controllers.

Why take this course?

WebXR brings both VR and AR to the browser. The API has the massive forces of Google and Amazon behind it so it looks like immersive experiences, using only a browser, are going to make a huge impact in the near future. WebXR works great with Oculus headsets, including the Oculus Quest 2 and the Chrome Android browser is already supporting the API for both AR, Augmented Reality, and VR, Virtual Reality, experiences. But WebXR only harnesses the sensors on a mobile device and creates an agreed definition of how to use this data. To actually visualise 3D content you need a WebGL library and there is no better one to use than Three.JS. This mature Open Source library has many users around the globe and is supported by many developers. Three.JS is at version 118 at the time of writing and is a robust, production ready library. Recently WebXR support was added to the library. Making it easy for developers to create immersive experiences.

In this course you'll learn how easy it is, using Three.JS, to create VR and AR experiences. To get the best from the course you will need to be comfortable with JavaScript coding. No other prerequisites are required.

The course is split into 10 sections.

  1. Introduction - I introduce the history of WebXR, give you a basic primer for those of you new to 3D concepts and show you the Three.JS website and the WebXR examples.

  2. A Three.JS Primer -  is for Three.JS novices to bring you up to speed on the library.

  3. An introduction to WebXR using Three.JS - we look in earnest at your development environment and create our first WebXR examples.

  4. Using complex assets with Three.JS - most things you create for immersive experiences will need complex assets and sourcing, editing, loading and working with them is the subject of section 4.

  5. The WebXR API - gives a review of the WebXR API.

  6. Creating an Architectural Walk-Through - in section 6 we start to create real world examples of immersive content with an architectural walk-through.

  7. Placing a Product in a Room - WebXR lends itself to showing real products in a person’s home and that is the topic for section 7.

  8. Using WebXR for games - VR is perfect for games and we look at the basic ingredients of a game using WebXR in this section.

  9. Using WebXR for training - covers the important topic of using VR for training.

  10. Conclusion - we look at some WebXR examples to inspire you and review what you’ve learnt.

The only tools you'll need are a code editor, in the course I use Brackets, freely available online. The course includes comprehensive resources and code examples. Each code example comes with two versions, one for you to code along with and another that is complete in case you hit a problem. I show you how to use GitHub to host your development work on a secure server so you can easily test your work on a headset, such as an Oculus Quest

It’s going to be fun.

You get a 30 day money back guarantee, so you're nothing to lose, go virtual today.


Reviews

"This is by far the best guide to Three JS, nothing but fun and clearly explains the parts needed for a 3D app. Thanks Nik for taking the time on this! Can't wait to see where this course take me!"

"Thanks for creating the course" - Mr Doob, the creator of Three.JS

"We all Nik fans were waiting for this one when he previously announced it in the Facebook group. And he didn't disappoint us."

"Best Intro/History Video Ever"

"Love it so far! The lessons are concise and to the point. The videos' length seems quite optimized, meaning they are not terribly long yet are filled with just enough information about what's going on. The supplied course project files constitute a valuable facilitation on the way through the course."

"It starts with the basics and then progress to advanced topics. I like the pace and the explanations. Great course!"

"Great course, love the well-chosen examples, just what I needed!"

"Excellent course, it took me by surprise how well documented and the high quality content from Nicholas , highly recommended. Cheers!"

Screenshots

Learn to create WebXR, VR and AR, experiences using Three.JS - Screenshot_01Learn to create WebXR, VR and AR, experiences using Three.JS - Screenshot_02Learn to create WebXR, VR and AR, experiences using Three.JS - Screenshot_03Learn to create WebXR, VR and AR, experiences using Three.JS - Screenshot_04

Reviews

Patryk
November 19, 2023
Really excited from the very beginning of this course. Recently I made somy simply VR application in Unity. But doing the same in Web would be much more available for the common VR user. Cant wait for the final results of this course. :)))
Nathan
August 25, 2023
yes , it was a good match. There is assumed OPP knowledge. I happen to have that. I needed to use Python local server. all the local software you told us to use isn't around anymore? I am going to get through this. I will know more when I finish because i have a 'simple' AR project that I am looking forward to doing! If I can get that to work after this. I'll consider this a "great course"
Yannik
June 13, 2023
I think the instructor knows a ton and gives very valuable and helpful information. Unfortunately, especially in the beginning its hard to follow along. You get bombarded with 15 resource links and are supposed to install some but not all. Then he just runs his project and I have no idea how to run my project although I did some Nodejs projects already. The course would benefit from a better onboarding (i.e. doing one precise example setup for each OS) so that everyone is ready to start. On the plus side, you get a very experienced instructor, good explanations and nice slides + help in how to use the Three.js docs.
Marco
April 14, 2023
Fast pace and packed infos, especially in section 3. But all the concepts, which are important, are explained in a compact way. That is what I need!
Jan
January 2, 2023
Nothing really to remark on other than I’m fairly new to js and I find that webXR and Three.js to be quite complex.
Jac
December 17, 2022
jest unikatowy i to jest zaleta, jednak jest omawiany jak dla profesjonalistów w dziedzinie - git i JavaScript. Osoby które mogły by w pełni rozumieć to co jest omawiane , nie potrzebowały by tego kursu :/ .
Jonathan
December 1, 2022
Para la comunidad en español: el curso es bueno, es bastante informativo en mi opinión. Te da conocimientos que al menos yo no he visto en otros recursos sobre el tema. Sin embargo, yo recomendaría que practicarán con otros tutoriales, pues los del curso son difíciles de seguir y varias personas(yo me incluyo) han seguido el código y no les ha funcionado. Por lo que en resumen, tomen el curso, tomen notas de lo que hace y porque lo hace, y después practiquen con otros recursos o tutoriales
Daniel
November 4, 2022
Just arrived from the excellent threejs for beginners course and got recommended this one by my teacher who already works on the field!
Pedro
October 19, 2022
Excellent course, it took me by surprise how well documented and the high quality content from Nicholas , highly recommended. Cheers!
Jorge
May 29, 2022
Very instructive course. Maybe , the 3d primer gets too deep into the technical data , but I appreciated the detail as it helped me visualize how graphics are rendered
Taffy
April 15, 2022
Thing is, the course content at times is hard to follow due to the fact that we do not go through the different things that have changed between chapter templates. Normally one would want to build something as they follow the course incrementally and not constantly have to ditch their work to get a hold of the neXt tutorial resource.
Fernando
March 22, 2022
It has given me what I need to start experimenting with WebXR with confidence. This course will be one of my go-to courses from now on.
Mark
January 21, 2022
This is a really good course. It's easy to understand. If you have a meta quest 2 then I could run the applications in it and it really helped. Other than the navigation around the castle needed work but that was an easy fix. You really need to add movement on the navmesh using a thumbstick. Maybe you could use the thumbstick code from you other classes
Alex
November 21, 2021
An excellent high-quality and versatile course with practical examples. I bought it for my children so that they could not only play video games in a virtual reality, but also learn the basics of WebXR. The course contains training materials with clear illustrations and step-by-step instructions. They have successfully completed tasks and are already trying to create their own VR game. I am pleased with the results and can recommend it to anyone who has a VR headset and basic knowledge of JavaScript.
Ordoumpozanis
March 12, 2021
Positives: Good Content, Organized Course You learn WebXR Negatives You have to know well three.js and js in order to follow. Not for starters. Quite difficult to follow the presenter on the coding part. It writes the code in fast forward and reads it, at a speed that you cannot follow. So you have to fast forward up to the end of coding, pause there to write the code, and start again. In many examples, there are coding errors in the start folder and you cannot follow the video. You have to go to the end folder and copy the code from there in order to proceed. I personally understand better coding when I am understanding the line that I am writing at the time, not writing complete routines and then analyzing them to understand.

Charts

Price

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

Rating

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

Enrollment distribution

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

Related Topics

3228865
udemy ID
6/12/2020
course created date
9/24/2020
course indexed date
Bot
course submited by