We may earn an affiliate commission when you visit our partners.
Course image

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.

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. "

Enroll now

12 deals to help you save

We found 12 deals and offers that may be relevant to this course.
Save money when you learn. All coupon codes, vouchers, and discounts are applied automatically unless otherwise noted.
Use code at checkout. Ended October 29
24-Hour Flash Sale
Save on all online courses in your cart and take advantage of big savings.
FLASH SALE
24T6MT102824
Use code at checkout. Ended October 19
24-Hour Flash Sale
Save on all online courses in your cart and take advantage of big savings.
FLASH SALE
ST15MT100124A
Ended October 8
24-Hour Flash Sale
Take advantage of big savings on online courses.
Up to
80%
off
Ended September 28
24-Hour Flash Sale! Save up to 85% on Udemy online courses.
For 24 hours, save big on courses from Udemy's extensive catalog.
Up to
85%
off
Ended September 25
Save on courses
Gain the skills you need to reach your next career milestone.
Up to
85%
off
Use code at checkout. Only 34 hours left!
24-Hour Sale
Save with steep discounts on most courses including bestsellers from popular instructors.
Flash Sale!
ST7MT110524
Use code at checkout. Ended October 12
Explore new possibilities
Start exploring new possibilities for your future with courses on sale.
Up to
85%
off
ST14MT101024
Use code at checkout. Valid until November 13
Get skills that impress
Learn from courses across popular topics and take big discounts during this 48-hour sale.
Up to
80%
off
ST20MT111124A
Ended October 1
Personal Plan sale
Gain unlimited access to thousands of courses. For a limited time, save when you start an annual subscription.
From
40%
off
Use code at checkout. Valid until December 1
For new customers
Save when you purchase top courses. For new customers only.
Special Offer
UDEAFNULP2024
Ended November 1
New customer offer
New customers, complete your first order and save big.
Up to
80%
off
Valid for a limited time only
Future-proof your career
Access O'Reilly books, live events, courses, and more. Save with an annual subscription.
Take
15%
off

Good to know

Know what's good
, what to watch for
, and possible dealbreakers
Teaches creators how to build immersive experiences in VR and AR through concise, well-optimized video lessons
Offers an end-to-end guide to creating immersive experiences with Three.JS on WebXR, from installation to deployment
Covers the latest version of Three.JS and leverages recent support for WebXR, ensuring relevance and compatibility
Provides comprehensive resources and code examples, minimizing barriers to learning
Offers a 30-day money-back guarantee, reducing the risk for potential students
Uses Brackets as the preferred code editor, which may limit choice for those with other preferences

Save this course

Save Learn to create WebXR, VR and AR, experiences using Three.JS to your list so you can find it easily later:
Save

Activities

Be better prepared before your course. Deepen your understanding during and after it. Supplement your coursework and achieve mastery of the topics covered in Learn to create WebXR, VR and AR, experiences using Three.JS with these activities:
Review JavaScript basics
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
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
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
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

Learners who complete Learn to create WebXR, VR and AR, experiences using Three.JS will develop knowledge and skills that may be useful to these careers:
3D Artist
A 3D Artist creates 3D models and animations for use in a variety of applications, including games, movies, and architecture. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. The course covers the fundamentals of Three.JS, including 3D modeling, animation, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to create their own 3D content for VR and AR experiences.
WebXR Developer
A WebXR Developer creates immersive experiences for virtual and augmented reality using Three.JS. This course provides a comprehensive introduction to Three.JS and WebXR, making it an ideal starting point for aspiring WebXR Developers. The course covers the fundamentals of Three.JS, including 3D graphics, scene management, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to develop their own immersive experiences.
VR/AR Developer
A VR/AR Developer creates immersive experiences for virtual and augmented reality. This course provides a comprehensive introduction to Three.JS and WebXR, which are essential tools for VR/AR development. The course covers the fundamentals of Three.JS, including 3D graphics, scene management, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to develop their own immersive experiences for VR and AR.
Game Developer
A Game Developer creates video games for a variety of platforms, including consoles, PCs, and mobile devices. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. The course covers the fundamentals of Three.JS, including 3D modeling, animation, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to develop their own 3D games for VR and AR.
Web Developer
A Web Developer creates websites and web applications. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. The course covers the fundamentals of Three.JS, including 3D modeling, animation, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to create their own 3D web experiences.
Software Engineer
A Software Engineer designs, develops, and maintains software applications. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. The course covers the fundamentals of Three.JS, including 3D modeling, animation, and lighting, as well as the basics of WebXR, such as device orientation and head tracking. With this foundation, learners can begin to develop their own 3D software applications.
Data Scientist
A Data Scientist analyzes data to extract insights and make predictions. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. While Three.JS is not typically used in data science, it can be used to visualize data in 3D, which can be helpful for understanding complex relationships. With this foundation, learners can begin to develop their own 3D data visualizations.
Marketing Manager
A Marketing Manager plans and executes marketing campaigns. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create interactive marketing experiences, such as product demos and virtual tours. With this foundation, learners can begin to develop their own 3D marketing experiences.
Technical Writer
A Technical Writer creates documentation for software and other products. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create interactive tutorials and product demos, which can be helpful for explaining complex concepts. With this foundation, learners can begin to develop their own 3D technical documentation.
Customer Success Manager
A Customer Success Manager helps customers get the most value from a product or service. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create customer support tools, such as interactive tutorials and product demos. With this foundation, learners can begin to develop their own 3D customer support tools.
Teacher
A Teacher teaches students in a variety of subjects. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create interactive educational experiences, such as virtual field trips and science simulations. With this foundation, learners can begin to develop their own 3D educational experiences.
eLearning Developer
An eLearning Developer creates and develops online learning materials. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create interactive eLearning experiences, such as virtual field trips and science simulations. With this foundation, learners can begin to develop their own 3D eLearning materials.
Sales Manager
A Sales Manager leads and manages a sales team. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create sales presentations and product demos, which can be helpful for closing deals. With this foundation, learners can begin to develop their own 3D sales presentations.
Product Manager
A Product Manager plans and manages the development of products. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create prototypes and mockups of products, which can be helpful for getting feedback from users. With this foundation, learners can begin to develop their own 3D product mockups.
Instructional Designer
An Instructional Designer creates and develops educational materials. This course provides a comprehensive introduction to Three.JS, a powerful WebGL library for creating 3D graphics. Three.JS can be used to create interactive educational experiences, such as virtual field trips and science simulations. With this foundation, learners can begin to develop their own 3D educational materials.

Reading list

We've selected six books that we think will supplement your learning. Use these to develop background knowledge, enrich your coursework, and gain a deeper understanding of the topics covered in Learn to create WebXR, VR and AR, experiences using Three.JS.
Offers a quick introduction to WebGL for developers with experience in JavaScript and HTML5. It covers the basics such as creating a WebGL context, shaders, textures, and transformations, but also more advanced topics such as lighting, shadows, and post-processing effects.
Provides a comprehensive guide to WebGL programming, covering topics such as 3D modeling, lighting, animation, and shader programming. It valuable resource for developers who want to learn how to create interactive 3D graphics in the browser.
Offers a comprehensive overview of 3D graphics programming, including topics such as 3D modeling, lighting, animation, and rasterization. It valuable resource for developers who want to gain a deeper understanding of the underlying principles of 3D graphics.
Will teach you how to use Unity to create VR games and applications. It covers topics such as creating 3D environments, adding physics, and scripting.
Is a classic textbook on computer graphics that provides a comprehensive overview of the field. It covers topics such as 3D modeling, lighting, animation, rasterization, and image processing. It valuable resource for developers who want to gain a deep understanding of the theoretical foundations of computer graphics.
Comprehensive introduction to the principles and practice of augmented reality. It covers topics such as the history of AR, the different types of AR systems, and the applications of AR in various industries.

Share

Help others find this course page by sharing it with your friends and followers:

Similar courses

Here are nine courses similar to Learn to create WebXR, VR and AR, experiences using Three.JS.
Unreal Engine VR Development Fundamentals
Most relevant
Introduction to Virtual Reality
Most relevant
Developing Metaverse: Your first VR Game in Unreal Engine
Most relevant
Unity3D and the Oculus Rift
Most relevant
VR Developer Nanodegree
Most relevant
Three.js, React Three Fiber, Drei, React Spring & More
Most relevant
Introduction to Web AR development
Most relevant
User Experience & Interaction Design for AR/VR/MR/XR
Build Your Multiplayer VR Game From Scratch With Fusion
Our mission

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.

Affiliate disclosure

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.

© 2016 - 2024 OpenCourser