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

Самое сложное наступило, когда вопрос «как?» приходило в мою голову и продолжало отбрасывать любую идею, которая хотя бы отдаленно «обычная» или «известная», в пучину «черт возьми, нет!».

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

Если все в порядке, это должно выглядеть примерно так:

Примечание автора. Я сделал это для публичного использования, но мой собственный был немного другим, но я не могу добавить сюда эти файлы. Вы можете легко настроить его по своему усмотрению, если понимаете, как это было сделано. Итак, сойди с ума!

Ресурсы

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



Как поздравить кого-нибудь с днем ​​рождения с помощью дополненной реальности
У меня приближается день рождения подруги, поэтому я хотел сделать для нее что-то особенное. Поскольку она технический специалист, просто… medium.freecodecamp.org



Спасибо за чтение. В основном я пишу учебные пособия по проблемам, с которыми я столкнулся, и по любым новым технологиям, которые я исследую, так что следите за обновлениями в следующей статье.

Если вы нашли эту статью полезной, обязательно сообщите нам об этом в комментариях.

Вы также можете подписаться на меня в Twitter.

Больше контента на plainenglish.io