6 / 17–3 часа спринт
Цель эксперимента 2:
Однопользовательский предварительный просмотр альбома с динамическими сценами
- Отображение нескольких кнопок альбома
- On-Gaze Изменить выбранную рамку альбома, среду альбома и дорожку
Эксперимент 2 отправлен:
Предварительный просмотр альбома однопользовательских полу-статических сцен: https://musicworldtest1.neocities.org/
который…
- Загружает предустановленное окружение с популярным компонентом a-environment.
- Воспроизводит один трек The Ride by Anonymuz с собственным звуковым компонентом a-sound.
- Отображает несколько обложек альбомов, охватывающих дискографию Anonymuz, в качестве материальной оболочки для оригинального a-box.
- Вкл. - Нажмите "Изменить среду и дорожку альбома" - "Выбранный альбом не изменится" *
Резюме:
Экспериментальный спринт номер два находится в стадии реализации с более четким акцентом на гораздо более управляемую область - продолжение попытки исходного спринта создать иммерсивную дискографию исполнителей из нескольких альбомов.
Что ж, у нас есть один альбом ... так что давайте сначала займемся этой проблемой, просто жестко закодировав два дополнительных компонента ‹a-box› по той же оси X, что и компонент нашего первого альбома. Нам нужно будет повторить предыдущие шаги, которые мы предприняли для подготовки ресурсов, в основном загрузив изображения в Imgur и создав соответствующие теги ‹img› в нашем контейнере ‹assets›.
С точки зрения дизайна, особенно в таком новом интерфейсе, как смешанная реальность, очень важно постоянно давать пользователям обратную связь, чтобы они могли сопоставить действия с выходными данными. Например, поскольку мы знаем порядок альбомов и соответствующие им обложки / треки, мы сразу узнаем, какой альбом воспроизводится. Для пользователей это не сразу пользователи - какое из трех полей перед ними соответствует контексту, в котором они сейчас находятся?
Ответ, к которому мы пришли, - предоставить выбранному компоненту альбома немного больший масштаб площади поверхности (большая глубина / высота / ширина) по сравнению с аналогами.
Теперь, когда перед нами аккуратно выставлены три альбома, менее чем за 30 минут, пора заняться самым интересным ...
Определение и обработка состояния
Наша сцена A-Frame имеет по умолчанию состояние «Выбранный альбом» (большее поле), связанную среду альбома и связанную дорожку альбома. Теперь, когда у нас есть три разные кнопки альбома, у нас есть три различных возможных состояния . Каждое из этих трех состояний - это просто изменение, которое мы / пользователь ожидаем увидеть в нашей сцене при нажатии одной из трех кнопок. Напомним, что нам нужно учитывать общее состояние, которое состоит из следующих трех свойств:
- Альбом выбран - через увеличенный компонент ‹a-box›
- Воспроизведение трека - через собственный компонент A-Frame ‹a-sound›
- Album Environment - через общедоступный компонент A-Frame Environment.
Один из основных разработчиков A-Frame и пионеров WebVR, Кевин Нго, как обычно, очень пригодится при принятии решения о том, как подойти к стоящей перед нами государственной проблеме. Он выпустил компонент A-Frame State, который было довольно легко установить; мы импортировали следующие две строки в наш тег ‹Head› ‹/Head› и запустили пустой файл State.js, в котором будет храниться состояние нашей сцены:
<script src=”https://unpkg.com/aframe-state-component@^3.0.0/dist/aframe-state-component.min.js"></script><script src=”state.js”></script>
Мы перешли к нашему файлу state.js, чтобы определить наше состояние с помощью трех внутренних свойств, которые мы позже привяжем к нашей общей сцене. Краткое знакомство с React / Redux оказалось здесь весьма кстати, поскольку создание состояния и связанных с ним диспетчеров было несложным. Вскоре у нас были три свойства и три диспетчера действий, аккуратно обобщенные менее чем в 25 строк кода.
Мы вернулись к нашему файлу index.html, чтобы связать наше состояние с соответствующими компонентами - это делается путем добавления ключевого слова «bind__» к атрибуту компонентов. Например, звуковая составляющая:
<a-sound bind__src=”value: selectedAlbumTrack” autoplay=”true” position=”0 2 5"></a-sound>
Мы быстро подключили (связали) нашу среду и масштабировали коробку альбома до состояния по умолчанию, задержали дыхание и нажали кнопку «Обновить»… бинго! Ничего не сломалось. Визуально наша сцена A-Frame выглядит так же, но за кулисами (извините) мы добились довольно большого прогресса, поскольку сцена по умолчанию больше не жестко запрограммирована, а динамически загружается через наше глобальное состояние, определенное в state.js. Все, что осталось сейчас, - это создать курсор для нашего пользователя и написать обработчик событий для нашего компонента альбома ‹a-box›, чтобы изменять наше состояние, когда пользователь смотрит на альбом. Однако мы движемся довольно быстро, в этом спринте осталось чуть меньше часа.
Изменение выбранного альбома On-Gaze
Взгляд-курсор, который использует собственный компонент A-Frame ‹a-cursor›, был прост в реализации. Теперь остается только прикрепить к нашим альбомам слушателей событий, которые будут выдавать изменения в наше состояние. Достаточно просто.
И все же именно здесь мы, наконец, столкнулись с множеством проблем, из-за которых мы просто не достигли поставленной цели.
Во-первых, краткий отказ от ответственности, документация A-Frame, оглядываясь назад, безусловно, действительно дает пример для прослушивателей событий; однако не сразу очевидно, что этот пример работает с простым изменением переданного параметра. В течение добрых 15 минут + я просматривал документацию в поисках ответа на способ по умолчанию создать кнопку из существующего компонента без четкого ответа. Учитывая богатство документации A-Frame, я был удивлен отсутствием информации о такой ключевой пользовательской функции.
К счастью, ветка GitHub содержала суть, которая более подробно объясняла, как обработка событий работает для компонентов. Достаточно просто создать новый компонент и внутри функции init: lifecycle просто использовать this.el. addEventListener (‘click’, function (evt) { наша логика здесь }). Мы назвали наш компонент курсором-слушателем и написали довольно простой оператор If-Then, основанный на HTML-идентификаторе щелчка ‹a-box›, который испускает три изменения состояния, необходимые для смены сцены альбома. А теперь момент истины, осталось менее 30 минут… чтобы проверить это!
Это сработало! По крайней мере, на первый взгляд это работает хорошо… со второго взгляда становится ясно, что у нас несколько ошибок, с которыми мы столкнемся в следующем спринте. Во-первых, масштаб выбранного альбома, как ни странно, не изменился при нажатии на второй, средний альбом (самый левый альбом остается самым большим). Во-вторых, наша отложенная реакция на то, что взгляд не отображается автоматически - это, вероятно, не очевидно из приведенного выше GIF, но мы нажимаем здесь, а не смотрим.
Переходим к Практике 3 по WebVR!
Используемые новые общедоступные компоненты и технологии:
