Научитесь создавать WebXR, VR и AR опыт, используя Three.JS
Используйте возможности нового WebXR API и Three.JS, чтобы привнести иммерсивный опыт, VR и AR, в браузере
Автор: Николас Левер
Субтитры: Русский, Английский [Авто]
Язык: Английский
Чему вы научитесь
- Как легко создавать приложения VR и AR, которые работают в браузере
- Как использовать библиотеку ThreeJS для создания этих приложений
- Как обращаться с контроллерами
- Как заменить контроллеры на нестандартные модели
- Как создавать архитектурные обзоры, игры и обучающие приложения.
- Как добавить интерфейс в мир
- Разработка приложений AR, поддерживающих тестирование попаданий в реальном мире
- Изучите игровые приемы VR, такие как телепортация и взаимодействие с моделями в сцене с помощью контроллеров.
WebXR предоставляет браузеру как VR, так и AR . API имеет огромные силы от Google и Amazon за ним , так это выглядит , как иммерсивный опыт, используя только браузер, собирается сделать огромное влияние в ближайшем будущем. WebXR отлично работает с гарнитурами Oculus, а браузер Chrome Android уже поддерживает API для AR и VR. Но WebXR использует только датчикимобильного устройства и дает согласованное определение того, как использовать эти данные. Чтобы действительно визуализировать 3D-контент, вам нужна библиотека WebGL, и нет ничего лучше, чем Three.JS. Эта зрелая библиотека с открытым исходным кодом имеет множество пользователей по всему миру и поддерживается многими разработчиками. Three.JS имеет версию 118 на момент написания и представляет собой надежную, готовую к работе библиотеку. Недавно в библиотеку была добавлена поддержка WebXR. Упрощение для разработчиков создания иммерсивного опыта .
В этом курсе вы узнаете, насколько легко с помощью Three.JS создавать возможности виртуальной и дополненной реальности. Чтобы получить максимальную отдачу от курса, вам необходимо хорошо разбираться в кодировании JavaScript . Никаких других предварительных условий не требуется.
Курс разделен на 10 разделов .
- Введение. Я познакомлю вас с историей WebXR, дам вам базовый курс для тех, кто плохо знаком с концепциями 3D, и покажу вам веб-сайт Three.JS и примеры WebXR.
- Three.js Primer - для three.js новичков довести вас до скорости в библиотеке.
- Введение в WebXR с использованием Three.JS - мы серьезно изучаем вашу среду разработки и создаем наши первые примеры WebXR .
- Использование сложных ресурсов с Three.JS - большинство вещей, которые вы создаете для иммерсивного опыта, потребуют сложных ресурсов, и их поиск, редактирование, загрузка и работа с ними является предметом раздела 4.
- WebXR API - дает обзор WebXR API.
- Создание архитектурного обхода - в разделе 6 мы начинаем создавать реальные примерыиммерсивного контента с архитектурного обхода.
- Размещение продукта в комнате - WebXR позволяет показывать реальные продукты в доме человека, и это тема раздела 7.
- Использование WebXR для игр - VR идеально подходит для игр, и в этом разделе мы рассмотрим основные составляющие игры с использованием WebXR .
- Использование WebXR для обучения - затрагивает важную тему использования VR для обучения.
- Заключение - мы рассмотрим некоторые примеры WebXR, чтобы вдохновить вас и повторить то, что вы узнали.
Единственные инструменты, которые вам понадобятся, - это редактор кода , в курсе я использую Brackets , который доступен бесплатно в Интернете. Курс включает исчерпывающие ресурсы и примеры кода. Каждый пример кода поставляется с двумя версиями: одна для вас, чтобы кодировать вместе, а другая - полная на тот случай, если вы столкнетесь с проблемой. Я покажу вам, как использовать github для размещения ваших разработок на защищенном сервере, чтобы вы могли легко протестировать свою работу на гарнитуре , такой как Oculus Quest.
Материалы курса
• 44 лекций • Общая продолжительность 4 ч 40 мин
- Предпросмотр03:40
- Настройка безопасного веб-сервера
00:56 - Предпросмотр06:09
- A 3D Primer
05:11 - Примеры THREE.js
06:14 - Что вы узнали?
4 вопросов
- Настройка простой страницы THREE.js с использованием модулей
06:17 - Создание вращающегося куба
09:59 - Редактор THREE.js
07:36 - Геометрии
06:30 - Материалы
05:54 - Погрузчики
06:45 - Что вы узнали?
5 вопросов
- Предпросмотр05:24
- Настройка VRButton
11:38 - Добавление взаимодействия пользователя с контроллером
07:40 - Добавление события нажатия кнопки в контроллер
09:18 - Создание собственного контроллера
06:40 - Доступ к геймпаду
09:57 - Предпросмотр08:13
- Физика в вашем VR-мире
12:17 - Предпросмотр06:41
- Контроллеры в приложении AR
07:17 - Сенсорные жесты в приложении AR
10:17 - Предпросмотр09:39
- Что вы узнали?
10 вопросов
- Поиск активов в Интернете
06:18 - Использование Mixamo для настройки анимации персонажей
02:54 - Использование Blender для экспорта активов
03:59 - Использование системы анимации THREE.js
07:38 - Что вы узнали?
2 вопросов
- XRSystem и XRSession
03:55 - XRFrame и XRSpace
03:25 - XRInputSource
05:10 - Что вы узнали?
3 вопросов
- Перемещение по окружающей среде
06:22 - Взаимодействие с объектами в сцене
06:58 - Использование GazeController
03:23 - Обеспечение функциональности приложения на устройстве без XR
04:02 - Что вы узнали?
4 вопросов
- Использование AR для создания рулетки
10:58 - Добавление динамической анимации к товару
04:19 - Что вы узнали?
2 вопросов
- Движение телепортацией
06:22 - Взаимодействие с сетками
05:49 - Предпросмотр08:59
- Что вы узнали?
3 вопросов
- CanvasUI - часть 1
06:17 - CanvasUI - часть 2
03:37 - Использование CanvasUI для обучения
08:52 - Что вы узнали?
3 вопросов
- Примеры WebXR, статьи, видео и репозитории, чтобы вдохновить и проинформировать вас
00:23 - Бонус за чтение
00:44
- Всем, кто заинтересован в использовании новейшего API WebXR для создания возможностей виртуальной и дополненной реальности, которые работают в браузере без дополнительных требований к установке.
https://www.udemy.com/course/learn-webxr/