6 / 18–6 / 22 –4x45 мин. Спринт

Цель эксперимента 3:

Однопользовательский, заметный, динамический предварительный просмотр альбома:

  • Отображение нескольких кнопок альбома
  • On-Gaze ​​Изменить выбранную рамку альбома, среду альбома и дорожку альбома

Эксперимент 3 отправлен:

Однопользовательский, заметный, динамический предварительный просмотр альбома: https://musicworldtest2.neocities.org/

который…

  • Отображает три кнопки альбома - сущности ‹a-box› с обложкой компонента материала, установленной на ‹imgs›; активный альбом больше аналогов
  • Загружает связанную среду альбома - с использованием общедоступного компонента среды A-Frame с предварительно загруженным пресетом, который соответствует цветовой палитре активного альбома
  • Воспроизведение связанной дорожки альбома - сущность ‹a-sound› с атрибутом «src:», установленным для нашего свойства selectedAlbumTrack в нашем состоянии
  • Элементы управления On-Gaze ​​- «Щелчок» для переключения активных альбомов теперь заменен триггером события «mouseenter».

Резюме:

Экспериментальный спринт номер три сейчас проводится как первый внутринедельный спринт. Для этого спринта я снова решил продлить предыдущий, так как я закончил очень быстро для достижения цели / цели.

На этот раз наша цель - наконец-то создать простую иммерсивную дискографию альбома исполнителя, управляемую взглядом с помощью гарнитуры.

SetAttribute () против Object3D

Начиная с нашего предыдущего спринта, к концу неожиданно выскочила небольшая и, казалось бы, незначительная ошибка. В частности, нажатие кнопки альбома успешно изменило среду альбома и дорожку альбома; однако он не обновил размер нового выбранного альбома. Независимо от того, по какому альбому мы щелкнули, только первый альбом оставался больше остальных - это могло сбить с толку пользователей, поскольку уже не ясно, идет ли сейчас предварительный просмотр нового альбома.

Но что действительно раздражает, так это то, что логика одинакова для изменения всех трех свойств состояния: окружения, дорожки и выбранного альбома. Когда выбран новый блок, испускает изменение состояния, которое, в свою очередь, обновляет атрибуты трех компонентов: так почему же выбранное свойство альбома было единственным обновленным свойством состояния, которое не отображалось ???

К сожалению, мне потребовалось непропорционально много времени (около ~ 90 минут), чтобы ответить на предыдущий вопрос, но, к счастью, ответ пролил свет на низкоуровневые знания A-Frame, которые, оглядываясь назад, я рад, что нашел время изучить. Функция обновления атрибутов A-Frame по умолчанию, setAttribute (), является правильным инструментом для работы в 99% случаев; как назло, обновление масштаба компонента с помощью переустановки атрибутов - один из немногих случаев, когда setAttribute () - неправильный выбор.

Для нескольких основных атрибутов (положение, вращение, масштаб и видимость) A-Frame требует доступа к методам Three.JS нижнего уровня по соображениям производительности. Прикладной пример предыдущего выглядит следующим образом:

document.querySelector(“#albumThree”).object3D.scale.set(.75, .75, .75);

И поехал тестировать. Теперь, когда щелкают по окну альбома, все три изменения свойств отражаются соответствующим образом - новый активный блок альбома успешно меняет размер!

От клика к вниманию

Остается почти час, и похоже, что я смогу достичь намеченной цели (впервые в этой серии…). Теперь, когда наше активное окно альбома успешно масштабируется, единственная оставшаяся ошибка - это переключение триггеров событий на кнопках окна альбома с «щелчка» на «пристальное внимание» - эквивалент «наведения» в смешанной реальности.

Быстрый поиск в Google привел к аккуратному форуму, на котором обсуждались различные методы триггеров, встроенные в Javascript; в этих методах я нашел наиболее подходящее объявление: «mouseenter».

this.el.addEventListener(‘mouseenter’, function (evt) {
 var target = String(‘#’ + el.id);
 if (el.id == “albumOne”) {
 console.log(“Album one was clicked”);
 ... rest of state changes when Album one is clicked

И это все, что она написала - на этот раз завершила нашу намеченную цель раньше срока. Когда я смотрел на конечный продукт, найденный здесь, https://musicworldtest2.neocities.org/, возникла идея, на которой я хотел бы сфокусироваться в следующем спринте: я хотел бы добавить еще слой погружения в дискографию альбома за счет использования не что иное, как музыкальный визуализатор.

Приступаем к эксперименту 4 WebVR!

Используемые новые общедоступные компоненты и технологии:

Нет / ninguno / niel