Skip to content

Latest commit

 

History

History
652 lines (434 loc) · 43.2 KB

content.md

File metadata and controls

652 lines (434 loc) · 43.2 KB

Школа A-Frame

Интерактивный курс по WebVR

aframe.io

Пролог

С помощью Glitch в школе вам даются упражнения «шаг за шагом», чтобы помочь вам погрузиться в мир WebVR! В школе перемещение по разделам осуществляется ← and →, а перемещение между подразделами ↑ and ↓:

Навигация ↓

Полезные ресурсы во время вашего путешествия

  1. Просмотрите Документацию и Часто задаваемые вопросы
  2. Обратитесь за помощь на Slack
  3. Задайте вопрос на Stack Overflow
  4. Если вы участвуете в семинаре , то поднимите свою руку, если у вас есть вопрос!

Навигация →

Glitch — введение

Школа использует Glitch в качестве среды обучения и разработки для A-Frame

  • Glitch запускает ваш код в браузере без необходимости дополнительноустанавливать что-нибудь ещё
  • Glitch позволяет переделывать проекты с использованием существующих проектов A-Frame в качестве отправной точки
  • Glitch мгновенно публикует и хранит ваш сайт с URL-адресом (например, https://aframe.glitch.me)
  • Glitch обновляет ваш сайт с A-Frame в реальном времени при каждом изменении кода
  • Glitch позволяет нескольким людям работать с кодом в одном проекте

Если вы заинтересованы в установке локального окружения для разработки, пропустите шаг ↓

Glitch — переделывание существующего проекта

Glitch позволяет переделать (или сделать ответвление) существующий проект и использовать это в качестве основы для вашего нового проекта. Перед тем как начать, мы рекомендуем связать аккаунт в Glitch с вашим аккаунтом в GitHub . Glitch предоставит вам имя проекта и его URL-адрес, сгенерированные случайным образом, которые вы можете изменить.

Переделать заготовленные проекты A-Frame в Glitch

Glitch — редактирование кода

После того, как вы переделали заготовку A-Frame в Glitch, проверьте, где вы будете редактировать свой код. Осмотритесь вокруг и убедитесь, что вы можете редактировать код серверной части, загружать ассеты, создавать новые файлы, или приглашать других, чтобы редактировать с вами!

Glitch — просмотр вашего проекта

После того как вы поработали в редакторе, посмотрите ваш проект в действии.

Glitch — экспортирование вашего проекта

В любой момент времени, если вы захотите скачать свой проект или экспортировать его на GitHub, можете обратиться к пункту меню Дополнительные опции. Скачивание даст вам файл с расширением .tgz, который вы сможете распаковать. В проектах A-Frame, от вас потребуется работать с тем, что находится в директории public/, а код серверной части игнорировать.

Если вы скачиваете проект, вам может быть интересно узнать про создание окружения для веб-разработки в следующем разделе ↓. В противном случае, жмите → для того, чтобы приступить к изучению A-Frame!

[Дополнительно] Установка окружения web-разработки

Вы можете установить полноценное окружение web-разработки на вашей локальной машине, а не использовать онлайн-среду web-разработки Glitch.

  1. Получите текстовый редактор: Atom хороший вариант для начала
  2. Установите локальный сервер: Скачайте и запустите Mongoose Server или запустите python -m SimpleHTTPServer в консоли
  3. Создайте файл index.html и скопируйте код A-Frame из представленных в Glitch примеров
  4. Запустите локальный сервер в той же директории, что и файл HTML
  5. Откройте URL-адрес локального сервера в вашем браузере (например, http://localhost:8000)
  6. Внесите изменения в ваш HTML файл и перезагрузите браузер, чтобы увидеть их
  7. Дополнительно: попробуйте ngrok для того, чтобы любое устройство в любой сети имело доступ к вашему локальному серверу

[Дополнительно] Установка окружения web-разработки — получите текстовый редактор

Atom — хороший текстовый редактор для начала, если у вас нет ничего другого. Другими популярными вариантами являются: Notepad++, Sublime, Brackets или vim.

[Дополнительно] Установка окружения web-разработки — установите локальный сервер

Вам будет нужен локальный HTTP-сервер, чтобы обслуживать ваши файлы в браузере.

python -m SimpleHTTPServer 8080

[Дополнительно] Установка окружения web-разработки — используйте ngrok

При желании вы можете использовать ngrok для того, чтобы разрабатывать свой A-Frame проект со смартфона без необходимости выполнять настройку доступа к локальному IP-адресу.

  1. Скачайте и распакуйте ngrok в любое место
  2. Запустите ngrok, предоставив ему номер порта вашего локального сервера (./ngrok http 8080)
  3. ngrok предоставит вам URL-адрес, состоящий из набора букв и цифр (e.g., https://abcdef123456.ngrok.io)
  4. Откройте этот URL-адрес с другого устройства в любой сети (таком как смартфон или другой компьютер)

Попробуйте примеры A-Frame

Поработайте с примерами в вашем десктопе или смартфоне на странице A-Frame, в блоге A-Frame, или awesome-aframe. Посмотрите webvr.rocks для получения информации о настройке WebVR with с гарнитурой, если она у вас есть.

Начните с Привет, WebVR

A-Frame предоставляет простые в использовании HTML элементы, называемые примитивами. В разделе ниже мы изменим основные мэши через HTML аттрибуты (например, цвет, положение, вращение, масштаб) и дадим почувствовать рабочий процесс.

Начните с Привет, WebVR — положение

Положение определяет где объекты находятся в трехмерном пространстве (X, Y, Z) в метрах. Изменяйте положение объектов через атрибуты позиции в HTML. Почитайте о положениях.

Переделать урок в Glitch

  1. Переместите цилиндр влево, чтобы уменьшить значение позиции по оси X
  2. Переместите поле вверх, чтобы увеличить значение позиции по оси Y
  3. Переместите сферу назад, чтобы уменьшить значение позиции по оси Z
  4. Дополнительно: Добавьте <a-ring> в качестве дочернего элемента <a-sphere> и дайте ему возможность видеть относительные позиции

Посмотреть результат

Начните с Привет, WebVR — вращение

Вращение определяет ориентацию объектов в трехмерном пространстве (по осям X, Y, Z) в градусах. Используйте правило правой руки, чтобы пространственно визуализировать вращение. Почитайте о вращениях.

Переделать урок в Glitch

  1. Поверните цилиндр вокруг оси X так, чтобы мы увидели его дно
  2. Поверните поле вокруг оси Y так, чтобы оно было обращено прямо
  3. Дополнительно: Оберните контент сцены в <a-entity> (как <div>) и поверните её, чтобы увидеть относительные вращения

Посмотреть результат

Начните с Привет, WebVR — добавление примитивов

Добавьте примитивы в сцену, включив HTML элементы внутрь <a-scene>. Почитайте о примитивах.

Переделать урок в Glitch

  1. Добавьте <a-torus-knot> в левую часть
  2. Добавьте <a-dodecahedron> в правую часть
  3. Добавьте <a-text>, выровненный по центру

Посмотреть результат

Добавление текстур — загрузка ассетов

Мы добавим изображения текстур к мэшам для лучшего внешнего вида, чем при заливке плоскости цветом. Найдите ваши собственные изображения онлайн, и загрузите их через раздел ассетов в Glitch или через загрузчик cdn.aframe.io. Куда бы вы ни загрузили данные, убедитесь, что там поддерживается CORS поверх HTTPS.

В Glitch внизу ↓, некоторые ассеты уже будут предоставлены в разделе ассетов (на изображении выше).

Добавление текстур — текстуры изображений

Заполните HTML-атрибуты src с URL-адресами изображений. Прочитайте об использовании текстур изображений.

Переделать урок в Glitch

  1. Добавьте текстуру на землю, <a-plane>
  2. Добавьте текстуры в <a-box>ы
  3. Добавьте текстуру в <a-sphere>
  4. Добавьте текстуру в <a-cone>
  5. Добавьте текстуру на задний план, <a-sky>. Найдите панорамные изображения 360° на FLickr

Посмотреть результат

Откройте Инспектор A-Frame

Нажмите <ctrl> + <alt> + i на любой сцене A-Frame, чтобы открыть визуальный редактор, подобно Dev Tools в вашем браузере! Попробуйте Инспектор на каком-либо из примеров. Прочитать про Инспектор.

Откройте Инспектор A-Frame — изменение значений компонентов

Измените объект, изменив его компоненты на правой панели. Инспектор знает обо всех компонентах A-Frame, включая community-компоненты. Этот пример включает внешний компонент text-geometry, в котором Инспектор может изменить значения.

Открыть пример в Glitch

  1. Выберите один из объектов с текстом в примере
  2. Измените значение свойства у компонента text-geometry

Откройте Инспектор A-Frame — присоединение компонентов из реестра

Используйте физические компоненты из реестра, чтобы добавить гравитацию и столкновения. Реестр представляет собой курируемую коллекцию компонентов A-Frame. Инспектор подключается к реестру, чтобы мы могли добавить компоненты в панель сущностей.

Открыть пример в Glitch

  1. Добавьте статический компонент в наземную сетку
  2. Добавьте динамический компонент к торическому узлу (фиолетовый крендель сзади)
  3. Увеличьте значение позиции по оси Y у торического узла, чтобы сделать его выше
  4. Покиньте Инспектор

Создайте entity-компонент — переделка элементов-примитивов

Помимо простых в использовании элементов-примитивов A-Frame основывается на архитектуре entity-компонентов. Разложите элементы-примитивы в примере Привет, WebVR в <a-entity> с их фундаментальными компонентами.

Переделать урок в Glitch

  1. Сконвертируйте <a-box> в <a-entity> с компонентом geometry и компонентом material. Настройте geometry как primitive: box
  2. Сконвертируйте <a-sphere> в <a-entity> с компонентом geometry и компонентом material. Настройте geometry как primitive: sphere
  3. Сконвертируйте <a-cylinder> в <a-entity> с компонентом geometry и компонентом material. Настройте geometry как primitive: cylinder
  4. Сконвертируйте <a-plane> в <a-entity> с компонентом geometry и компонентом material. Настройте geometry как primitive: plane
  5. Сконвертируйте <a-sky> в <a-entity> с компонентом geometry и компонентом material. Настройте geometry как primitive: sphere с атрибутом radius: 3000, а также настройте material как shader: flat (не будут проводиться трудоёмкие вычисления освещённости, когда на нужен плоский цвет)

Посмотреть результат

Создайте entity-компонент — добавление сферы источника света

Используйте шаблон entity-компонента, чтобы добавить сферу, которая действует также как точечный источник света. Смешайте компоненты geometry, material и light, чтобы создать этот тип объекта.

  1. Поищите <a-entity id="lightSphere">
  2. Прикрепите компонент geometry с настройкой primitive: sphere
  3. Прикрепите компонент material с настройкой color: #FFF и shader: flat
  4. Прикрепите компонент light с настройкой type: point
  5. Дополнительно: Добавьте компонент анимации из реестра с помощью тега <script>. Добавьте анимацию с настройкой property: position и dir: alternate, и loop: true, и с указанием значения позиции to: <POSITION>

Переделать урок в Glitch

>

Посмотреть результат

Создайте entity-компонент — работа с реестром

Реестр — отличное место для заимствования классных компонентов, добавленных туда сообществом A-Frame. Похоже на сторонние плагины. Найдите компоненты сообщества в реестра, скопируйте их JS-ссылки, включите их с помощью тега <script> и используйте их прямо внутри HTML.

  1. Включите Particle System. Прикрепите <a-entity> с компонентами particle-system с настройкой preset: default и preset: snow. Откройте Inspector, чтобы поиграть со значениями!
  2. Включите Animation. Прикрепите анимацию к сфере, чтобы изменить её масштаб с настройками компонента animation — property: scale, loop: true и to: 1.1 1.1 1.1
  3. Включите Outline Effect (контурный эффект). Перейдите в <script> и добавьте компонент outline в сцену

Переделать урок в Glitch

Посмотреть результат

Используйте JavaScript

Используйте JavaScript и DOM API для программного изменения сцены и объектов (entities). A-Frame — это не только HTML; A-Frame обеспечивает доступ к JavaScript, DOM API и three.js с полным контролем. Почитать об использовании JavaScript и DOM API совместно с A-Frame.

Переделать урок в Glitch

Чтобы посмотреть логи JavaScript мы можем открыть консоль разработчика в браузере, щелкнув правой клавишей по странице и выбрав Inspect или Inspect Element, а затем щелкнув вкладку Console. При просмотре решений мы можем видеть результаты через консоль браузера.

Используйте JavaScript — получение объектов

Используйте document.querySelector() и document.querySelectorAll(), чтобы получить ссылку на сцену и её объекты (entities). Почитать про запрос объектов.

Переделать урок в Glitch

  1. Получите ссылку на элемент <a-scene>, используя var sceneEl = document.querySelector('a-scene');
  2. Получите ссылку на все элементы <a-entity>, используя sceneEl.querySelectorAll('a-entity');
  3. Получите ссылку на объект box, используя sceneEl.querySelector('#box');
  4. Получите ссылку на объекты sphere и cylinder в одном вызове .querySelectorAll() с помощью многоэлементного селектора . Получите ссылку на объекты sphere и cylinder в одном вызове .querySelectorAll(), добавив и выбрав классы HTML

Посмотреть результат

Используйте JavaScript — изменение объектов

Используйте Entity.setAttribute() для изменения объектов после их извлечения из предыдущего упражнения. Почитать про изменение объектов.

Переделать урок в Glitch

  1. Измените компонент rotation в объекте box
  2. Измените свойство height компонента geometry в объекте cylinder
  3. Измените свойство metalness компонента material в объекте sphere

Посмотреть результат

Используйте JavaScript — создание объектов

Используйте document.createElement() для создания объектов и .setAttribute() для их конфигурирования, и .appendChild() для их добавления в сцену. Почитать про создание объектов.

Переделать урок в Glitch

  1. В JavaScript-цикле for создайте и добавьте 50 элементов <a-box> с позициями и размерами, заданными случайным образом (используйте Math.random())

Посмотреть результат

Используйте JavaScript — обработка событий

Используйте .addEventListener(), чтобы зарегистрировать функцию-обработчик, которая будет вызвана при наструплении определенного события. Затем вручную инициируйте это событие, чтобы увидеть исполнение функции-обработчика. Позже мы сможем использовать прослушиватели событий (event listeners) для изменения сцены, основанной на пользовательском вводе или других событиях. Почитать про события и прослушивание событий совместно с A-Frame.

Переделать урок в Glitch

  1. Зарегистрируйте event listener в объекте box для того, чтобы поймать событие foo. В функции-обработчике измените цвет объекта box
  2. Инициируйте событие foo с помощью вызова Entity.emit() и смотрите как в объекте box изменится цвет

Посмотреть результат

Добавьте Gaze-Based Cursor — добавление объекта Cursor

Используйте управляемый взглядом компонент cursor , чтобы обеспечить возможность взаимодействия с сущностями (прежде всего для смартфонов). Почитать про создание галереи изображений с обзором 360°.

Переделать урок в Glitch

На этом занятии все обработчики событий уже подключены. Нам просто нужно добавить объект с компонентом cursor, который будет предоставлять эти события на основе пользовательского ввода. Обратите внимание, что эти события не поддерживаются браузером, а создаются с помощью A-Frame.

  1. Добавьте объект <a-camera>. Ранее A-Frame предоставлял объект camera, созданный по умолчанию
  2. Добавьте объект <a-cursor> в качестве дочернего элемента под объектом camera
  3. Drag the camera around the click on the panels on desktop. On smartphones, stare at the panels to trigger clicks (i.e., gaze-based)

Посмотреть результат

Добавьте Gaze-Based Cursor — обработка событий

Используйте события click, mouseenter, mouseleave, предоставляемые gaze-based компонентом cursor, чтобы изменить свойства объекта.

В коде Glitch будет создана структура проекта. Мы можем добавить код JavaScript внутрь компонента handle-events, отмеченного комментариями в коде.

Переделать урок в Glitch

  1. Прикрепите наш controller-event-handler к кубам (cubes). Мы можем прикрепить его ко всем сразу через смешивание
  2. Добавьте слушатель событий, чтобы изменить цвет box'а при событий mouseenter
  3. Добавьте слушатель событий, чтобы восстановить первоначальный цвет box'а при событии mouseleave

Посмотреть результат

Добавляйте 3D модели — glTF модель

3D модели похожи на изображения 3D приложений и приложений виртуальной реальности (VR), хотя они и немного тяжелее. 3D модель создается заранее в программе 3D-моделирования, такой как Blender и состоит из вершин, текстур, материалов. Мы рекомендуем использовать glTF — это относительно новый стандарт формата 3D файлов, специально разработанный для Web. glTF подобен JPG в мире 3D моделей.

Переделать урок в Glitch

  1. Добавьте https://cdn.aframe.io/test-models/models/virtualcity/VC.gltf внутрь <a-asset-item id="cityModel"> в атрибут src для предварительной загрузки модели
  2. Добавьте #cityModel внутрь <a-gltf-model> в атрибут src для установки и добавления модели

Посмотреть результат

Добавляйте 3D модели — анимация модели glTF

Модели могут поставляться с анимацией. В приведенной выше модели имеется много анимаций кораблей, масштабирующихся по всему городу. В предыдущем Glitch мы предоставили простой компонент play-all-model-animations, который мы можем применить к нашей модели, чтобы воспроизвести её анимации. Продолжайте работать в вашем текущем Glitch.

  1. Включите компонент animation-mixer с помощью <script> внутрь <head> после скрипта A-Frame. Этот компонент в настоящее время находится в реестре и может быть включен в A-Frame. https://unpkg.com/[email protected]/dist/aframe-extras.animation-mixer.js
  2. Прикрепите компонент animation-mixer к <a-gltf-model>, установив его через HTML-атрибут animation-mixer. По умолчанию это будет воспроизводить сразу все анимации модели.

Посмотреть результат

Добавляйте 3D модели — загрузка 3D моделей

Если у вас есть собственная модель, то могут быть трудности с её загрузкой на CDN, поскольку она состоит из из нескольких файлов, которые ссылаются друг на друга. Пока что самый простой способ — загрузить их в репозиторий GitHub, опубликовать ветвь master на GitHub Pages, и использовать rawgit.com для их обслуживания. В качестве альтернативы вы можете настроить Amazon S3. И это ещё не всё.

Добавьте отслеживаемые элементы управления — добавление ручных элементов управления

Отслеживаемые ручные элементы управления обеспечивают эффект погружения и интерактивность. В следующем Glitch мы предварительно записали движения ручного элемента управления и нажатия кнопок с A-Frame Motion Capture. Теперь нам просто нужно добавить руки и захватить события от взаимодействия.

Переделать урок в Glitch

  1. Найдите <a-entity id="left"> и добавьте компонент hand-controls, настроенный для левой руки (hand-controls="left")
  2. Найдите <a-entity id="right"> и добавьте компонент hand-controls, настроенный для правой руки (hand-controls="right")
  3. Посмотрите результат и на то, как руки перемещаются с заранее записанными движениями

Посмотреть результат

Добавьте остлеживаемые элементы управления — добавление интерактивности

Есть много компонентов для добавления интерактивности с элементами ручного управления. controller-cursor, aabb-collider + grab, super-hands. Для этого урока мы будем использовать controller-cursor, который действует как лазерный указатель для каждой руки. Продолжайте работать с вашим предыдущим Glitch.

  1. Добавьте компонент controller-cursor для обеих рук
  2. В компоненте controller-event-handler измените цвет ящиков (box) с помощью события mouseenter и восстановите цвет с помощью события mouseleave

Посмотреть результат

Поздравления!

Вы закончили школу A-Frame и теперь получили виртуальную несертифицированную степень по WebVR.

Обратитесь к документации, чтобы получить больше знаний и стать мастером.