Пока один человек, каждый хочет знать, что он особенный для кого-то другого. Я хотел, чтобы другой знал, что это мой особенный человек, и, что еще лучше, ее день рождения был прямо за углом. Итак, я решил дать ей самое лучшее пожелание на день рождения, которое она когда-либо испытывала.
Самое сложное наступило, когда вопрос «как?» приходило в мою голову и продолжало отбрасывать любую идею, которая хотя бы отдаленно «обычная» или «известная», в пучину «черт возьми, нет!».
После того, как я в молодости чуть не облысел, когда пытался придумать хорошую идею, меня осенило… Я компьютерщик! И все знают, что в 21 веке нет большего преимущества, кроме, конечно, быть Богом.
Теперь я знаю, что она любит Pokemon Go, и сейчас AR получает ажиотаж ...
Вы достигли шлюза технических деталей, действуйте на свой страх и риск
Для этого я использовал следующие библиотеки: -
А-образная рамка, подробнее об этом здесь и
AR.js, подробнее об этом здесь и здесь
Компонент системы частиц A-Frame, он предназначался для добавления таких вещей, как звезды, пыль или снег, что-то вроде вечеринки.
Поверьте, даже если вы плохо разбираетесь в VR или AR, вы можете легко создать сцену VR с помощью A-Frame. Единственное обязательное условие - это HTML, который вы легко можете изучить здесь. Однако для лучшего понимания я рекомендую вам пройти Школу A-Frame, которая представляет собой отличный сборник руководств, предназначенных для начинающих.
Чтобы посмотреть сцену дополненной реальности, вам необходимо:
- Откройте это изображение маркера HIRO в браузере на рабочем столе.
- Откройте это веб-приложение AR в браузере телефона и наведите его на свой экран.
Когда вы сканируете маркер (здесь маркер HIRO), на вашем телефоне отображается сцена AR, как на изображении выше. Я использовал простой маркер HIRO, но вы также можете создать свой собственный маркер.
Я получил файлы 3D-моделей торта от Google Poly . Вы можете импортировать любые файлы ресурсов в A-Frame с помощью тега <a-assets>
. Вы также можете импортировать отдельные шрифты, если хотите использовать другой шрифт.
A-Frame также поддерживает аудиофайлы. Вы можете использовать тег <audio>
для импорта файлов под тегом <a-assets>
.
Окончательный код и файловая структура были такими, как показано ниже
index.html
<html> <head> <script src="https://aframe.io/releases/0.8.0/aframe.min.js"></script> <script src="https://jeromeetienne.github.io/AR.js/aframe/build/aframe-ar.js"></script> <script src="https://unpkg.com/aframe-text-geometry-component@^0.5.0/dist/aframe-text-geometry-component.min.js"></script> <script src="https://unpkg.com/[email protected]/dist/aframe-particle-system-component.min.js"></script> </head> <body style="margin: 0px;overflow: hidden;"> <a-scene embedded arjs="sourceType:webcam;debugUIEnabled: false;"> <a-assets> <a-asset-item id="cake" src="./model.gltf"></a-asset-item> </a-assets> <a-marker-camera preset="hiro"> <a-entity rotation="-90 0 0"> <a-entity position="0 -7 -15" particle-system="preset:default;accelerationValue:0,-10,0;color:#f9e154;particleCount:1000;direction:-1;rotationAxis:z;rotation:-90 0 0"></a-entity> </a-entity> <a-entity rotation="-80 0 0" position="0 -2 0" text-geometry="value: Happy Birthday Harshitha"></a-entity> <a-entity rotation="-80 0 0" scale="1.1 1.1 1.1" gltf-model="#cake"></a-entity> </a-marker-camera> </a-scene> </body> </html>
Кроме того, чтобы он работал, вы не должны напрямую открывать файл index.html, а вместо этого загружайте живой сервер или размещайте его в таких местах, как GitHub, сбой или подобные области, но самый простой способ - получить расширение живого сервера для VS Code. и обслужить его там, или, по крайней мере, так я и сделал.
Если все в порядке, это должно выглядеть примерно так:
Примечание автора. Я сделал это для публичного использования, но мой собственный был немного другим, но я не могу добавить сюда эти файлы. Вы можете легко настроить его по своему усмотрению, если понимаете, как это было сделано. Итак, сойди с ума!
Ресурсы
- Исходный код - https://github.com/highskillzz/ARbirthday-aframe
- Демо - https://highskillzz.github.io/ARbirthday-aframe/
Есть еще одна статья, которая делает то же самое, что и эта, было бы лучше проверить ее, если вы хотите знать значение каждой строки кода.
Спасибо за чтение. В основном я пишу учебные пособия по проблемам, с которыми я столкнулся, и по любым новым технологиям, которые я исследую, так что следите за обновлениями в следующей статье.
Если вы нашли эту статью полезной, обязательно сообщите нам об этом в комментариях.
Вы также можете подписаться на меня в Twitter.
Больше контента на plainenglish.io