Mô tả

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

Bạn sẽ học được gì

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.

Yêu cầu

  • An intermediate level JavaScript ability is assumed

Nội dung khoá học

11 sections

Introduction

7 lectures
Welcome to the course
03:40
Free e-book
00:28
Setting up a secure web server
01:19
The history of WebXR
06:09
A 3D Primer
05:11
The THREE.js Examples
06:14
What have you learned?
4 questions

A THREE.js Primer

7 lectures
Setting up a simple THREE.js page using modules
06:17
Creating a rotating Cube
09:59
The THREE.js editor
07:36
Geometries
06:30
Materials
05:54
Loaders
06:45
What have you learned?
5 questions

Introducing WebXR with THREE.js

14 lectures
Converting a standard THREE.js web app to use WebXR
05:24
Customising the VRButton
11:38
Adding user interaction with a controller device
07:40
Adding a button press event to the controller
09:18
Creating a custom controller
06:40
Accessing the gamepad
09:57
Moving around a VR world
08:13
Physics in your VR world
12:17
Creating an AR experience
06:41
Controllers in an AR app
07:17
Touch gestures in an AR app
10:17
Hit testing in AR
09:30
Hand-tracking on the Oculus Quest
06:15
What have you learned?
10 questions

Using complex assets with THREE.js

5 lectures
Finding assets online
06:18
Using Mixamo to setup character animations
02:54
Using Blender to export assets
03:59
Using the THREE.js animation system
07:38
What have you learned?
2 questions

The WebXR API

4 lectures
XRSystem and XRSession
03:55
XRFrame and XRSpace
03:25
XRInputSource
05:10
What have you learned?
3 questions

Creating an architectural walk-through

5 lectures
Moving around an environment
06:22
Interacting with objects in the scene
06:58
Using a GazeController
03:23
Making the app functional on a none XR device
04:02
What have you learned?
4 questions

Fun with AR

5 lectures
Using AR to create a tape measure
10:58
Adding dynamic animation to a product
04:15
An AR online shop example
08:14
WebXR AR on an iPhone!
07:05
What have you learned?
2 questions

A VR Game

4 lectures
Movement by teleporting
06:22
Interacting with meshes
05:49
Using a controller as a weapon
08:59
What have you learned?
3 questions

VR for training

4 lectures
CanvasUI - part 1
06:17
CanvasUI - part 2
03:37
Using CanvasUI for training
08:52
What have you learned?
3 questions

Progressive Web Apps (PWA)

3 lectures
Getting Started with PWAs
08:30
Packaging and deploying your PWA
04:35
A WebXR PWA
04:41

Conclusion

3 lectures
WebXR examples, articles, videos and repos to inspire and inform you
00:23
Three.JS with NPM and vite
07:56
Bonus Lecture
01:15

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.