У меня есть подруга, у которой скоро день рождения, поэтому я хотел сделать для нее что-то особенное. Поскольку она, как и я, 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 с помощью ts> тег. Вы также можете импортировать отдельные шрифты, если вы хотите использовать другой шрифт.

Я был вполне уверен, что A-Frame не может быть более потрясающим. Но жди…

Добавить аудио

День рождения тоже не обходится без песни о дне рождения, не правда ли? A-Frame также поддерживает аудиофайлы. Вы можете использовать o>, чтобы импортировать ваши файлы, под тегом .

Добавьте частицы

Что вам приходит в голову, когда вы слышите о дне рождения — после торта, конечно? А партия, да? Итак, давайте добавим конфетти к нашей 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, посетите эту ссылку.

Текст и аудио

Ну, можно использовать t> тоже, но я решил воспользоваться компонентом Text Geometry, чтобы получить дополнительные параметры. Он используется для создания текста как единой геометрии.

• Материал : Текстовый компонент геометрии определяет только геометрию. Мы можем применить любой материал 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 ]

Нет связанных сообщений