Содержание статьи
У меня есть подруга, у которой скоро день рождения, поэтому я хотел сделать для нее что-то особенное. Поскольку она, как и я, TechGeek, я не мог просто получить ей простой подарок на день рождения, как плюшевый мишка или шоколадные конфеты. Итак, я начал искать в Интернете уникальные способы поздравить ее с днем рождения.
В итоге я просмотрел видео, где юноша сделал предложение девушке с помощью VR. Итак, я решил – это все! Именно так я собирался это сделать. Но не часть предложения.
Пока я внес вклад в Mozilla, я создал несколько небольших проектов VR, используя А-рамка — Веб-фреймворк для создания опыта виртуальной реальности. И поверьте мне даже если вы мало знаете о VR или AR, вы можете легко создать сцену VR с помощью A-Frame. Единственная предпосылка – HTML, который вы можете легко изучить здесь. Однако для лучшего понимания я рекомендую вам пройти школу A-Frame, которая является прекрасной коллекцией учебных пособий для начинающих.
Поэтому я решил использовать A-Frame, но я хотел больше, чем просто VR-сцену с надписью «С днем рождения». В конце концов, я решил создать сцену AR. Я нашел отличный проект под названием AR.js. Если вы хотите начать работу с AR.js, вот: прекрасная статья для начинающих.
Создание базового веб-приложения AR
Для просмотра сцены AR необходимо:
- Откройте это изображение маркера HIRO в браузере компьютера.
- Откройте веб-приложение AR в браузере телефона и наведите его на экран.
Когда вы сканируете маркер (здесь маркер HIRO), он будет отображать сцену AR на телефоне, как на изображении выше. Я использовал обычный HIRO маркер, но вы также можете создать свой собственный маркер.
Итак, после добавления всех этих библиотек мой код выглядел так:
Обратите внимание, что во время доступа к любой веб-программе AR, если вы получите запрос с разрешением на доступ к веб-камере, разрешите это. В противном случае программа не будет работать.
Добавьте 3D-модели и шрифты
Итак, теперь на нашем устройстве работает простое веб-приложение AR. Но без чего же день рождения торт?! К счастью, A-Frame поддерживает три типа 3D-моделей: glTF, OBJ и COLLADA. Узнайте больше о 3D-моделях в A-Frame здесь.
Я загрузил несколько файлов 3D-моделей торта из Google Poly. Вы можете импортировать любые файлы активов в A-Frame с помощью
Я был вполне уверен, что A-Frame не может быть более потрясающим. Но жди…
Добавить аудио
День рождения тоже не обходится без песни о дне рождения, не правда ли? A-Frame также поддерживает аудиофайлы. Вы можете использовать
Добавьте частицы
Что вам приходит в голову, когда вы слышите о дне рождения — после торта, конечно? А партия, да? Итак, давайте добавим конфетти к нашей AR-сцене, используя компонент системы частиц A-Frame.
Давайте объединим все это вместе
3D модели
Этот код отобразит 3D-модель торта. Но, как видите, я добавил несколько значений в файле вращение и масштаба поля. Итак, давайте обсудим это. Согласно странице GitHub A-frame:
- Вращение: компонент вращения определяет ориентацию объекта в градусах. Это занимает шаг (
x), рыскание (y), и свернуть (z) в виде трех разделенных пробелами чисел, указывающих степени вращения. - Масштаб: компонент масштаба определяет сужение, растяжение или перекос сущности. Для осей X, Y и Z требуются три коэффициента масштабирования.
- MTL: выступает за Файл библиотеки материалов (.мтл) Библиотека материалов файлы содержат одно или несколько определений материалов, каждое из которых включает цвет, текстуру и карту отображения отдельных материалов. Они наносятся на поверхности и вершины объектов. Материал файлы хранятся в формате ASCII и имеют .мтл расширение.
- OBJ: формат файла, созданный как простой способ импорта и экспорта геометрии из разных 3D-программ. Это распространенный тип файла, используемый многими решениями для 3D-дизайна.
- Предложение: Если вы не видите свою модель, попробуйте снизить ее. Модели OBJ обычно имеют очень большие масштабы по сравнению со шкалой A-Frame.
Если вам интересно, откуда я знал точное значение вращения, то я не знал. Я использовал удивительный инструмент, созданный командой Mozilla под названием A-Frame Inspector, созданный только для этой цели.
Чтобы узнать больше о
Частицы
Ну, на первый взгляд, этот код может показаться потрясающим, но поверьте, это не так. Мы обсуждали ротацию раньше, но давайте также поговорим о других сферах:
- Позиция: размещает объекты в определенных местах в трехмерном пространстве. Позиция принимает значение координат как три числа, разделенных пробелом.
- Предустановленные: предварительно установленная конфигурация. Возможные значения:
default,dust,snow,rain. Здесь мы выбрали по умолчанию для отображения стартов. - Цвет: описывает цвет частицы Это свойство является свойством значения за время жизни, что означает, что для описания конкретных изменений значений в течение жизни частицы можно придать массив значений.
- Значение ускорения: описывает базовое ускорение этого эмиттера
- Количество частиц: общее количество частиц, которые будут содержать этот излучатель.
- Направление: направление излучателя. Если значение есть
1, эмиттер начнется в начале жизненного цикла частицы Если значение есть-1излучатель начнется в конце жизненного цикла частицы и будет работать в обратном направлении. - Вот вращение: описывает ось вращения этого излучателя. Возможные значения
x,yиz.
Чтобы узнать больше о Система частиц A-Frame, посетите эту ссылку.
Текст и аудио
Ну, можно использовать
- Материал : Текстовый компонент геометрии определяет только геометрию. Мы можем применить любой материал three.js к геометрии.
<a-entity text="value: HELLO" material="color: red; src: #texture"></a-entity>Чтобы узнать больше, посетите документацию three.js.
- Геометрия текста: строка и значение шрифта (Вам следует отредактировать текст в этой части, иначе вы в конечном счете поздравите моего друга с днем рождения??)
- Звук: определяет объект как источник звука или звука.
- Автоматическое воспроизведение: описывает, следует ли автоматически воспроизводить звук после настройки.
- Петля: описывает, следует ли зацикливать звук после завершения воспроизведения звука.
- Включено: событие, которое прослушивается объект перед воспроизведением звука.
Ресурсы:
Да, ты успел? ? ?. Вы создали свой fiпервая программа AR. яЕсли вы все сделали правильно, теперь вы должны увидеть что-то вроде изображения ниже:
Если вам нравится моя работа, подпишитесь на меня на Medium @Pratik Parmar или добавьте меня LinkedIn. Не стесняйтесь связаться со мной в Twitter: Pratik Parmar или прокомментировать ниже, если вам понадобится помощь.
Кроме вкладов с открытым кодом в Mozilla, я являюсь студенческим партнером Microsoft и членом сообщества GDG Baroda. Я хотел бы поблагодарить Mozilla и сообщество MozillaIN за то, что они предоставили мне шанс и ресурсы узнать о VR/AR и Open Source.
Это я, Пратик Пармар подписаться к следующему техническому происшествию. Снова и получается…
[ Edit: Thank you Vikranth Kanumuru for drawing my attention that URL of source code was broken. It’s been updated now, please go ahead and try now. Keep coding, keep rocking ]