Learn to create WebXR, VR and AR, experiences using Three.JS
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.
Read more
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.
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.
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.
A Three.JS Primer - is for Three.JS novices to bring you up to speed on the library.
An introduction to WebXR using Three.JS - we look in earnest at your development environment and create our first WebXR examples.
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.
The WebXR API - gives a review of the WebXR API.
Creating an Architectural Walk-Through - in section 6 we start to create real world examples of immersive content with an architectural walk-through.
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.
Using WebXR for games - VR is perfect for games and we look at the basic ingredients of a game using WebXR in this section.
Using WebXR for training - covers the important topic of using VR for training.
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. "
Good to know
Save this course
Save
Activities
Review JavaScript basics
Show steps
Refreshes your understanding of JavaScript, which is essential for Three.JS
Show steps
-
Go through online tutorials or documentation on JavaScript basics
-
Practice writing simple JavaScript programs
Review ThreeJs API
Show steps
Refreshes your memory on the Three.JS API
Show steps
-
Read about Three.JS API in the documentation
-
Go through examples from the Three.JS website
Create a 3D model of your room
Show steps
Allows you to apply your skills to create a practical 3D model
Browse courses on
3D Modeling
Show steps
-
Take measurements of your room
-
Create a new Three.JS project
-
Add a camera, scene, and renderer
-
Create the walls, floor, and ceiling of your room
-
Add furniture and other objects to your room
-
Render the scene
One other activity
Expand to see all activities and additional details
Show all four activities
Organize and review your notes and materials
Show steps
Improves retention by organizing and reviewing your notes and materials
Show steps
-
Gather your notes, assignments, quizzes, and exams
-
Organize them into a logical structure
-
Review the materials regularly
Review JavaScript basics
Show steps
Refreshes your understanding of JavaScript, which is essential for Three.JS
Show steps
- Go through online tutorials or documentation on JavaScript basics
- Practice writing simple JavaScript programs
Review ThreeJs API
Show steps
Refreshes your memory on the Three.JS API
Show steps
- Read about Three.JS API in the documentation
- Go through examples from the Three.JS website
Create a 3D model of your room
Show steps
Allows you to apply your skills to create a practical 3D model
Browse courses on
3D Modeling
Show steps
- Take measurements of your room
- Create a new Three.JS project
- Add a camera, scene, and renderer
- Create the walls, floor, and ceiling of your room
- Add furniture and other objects to your room
- Render the scene
Organize and review your notes and materials
Show steps
Improves retention by organizing and reviewing your notes and materials
Show steps
- Gather your notes, assignments, quizzes, and exams
- Organize them into a logical structure
- Review the materials regularly
Career center
3D Artist
WebXR Developer
VR/AR Developer
Game Developer
Web Developer
Software Engineer
Data Scientist
Marketing Manager
Technical Writer
Customer Success Manager
Teacher
eLearning Developer
Sales Manager
Product Manager
Instructional Designer
Reading list
Save
Save
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
