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