Рис. 5 Пример кода
**Теперь посмотрим на пример с отображением текста.** Сцена осталась прежней, только теперь у нас есть дополнительный тег ***\
Рис. 6 Вкладка Glyphs Здесь необходимо скопировать таблицу символов (Рис. 7). 
Рис. 7 Таблица символов
Затем возвращаемся на страничку с созданием нашего шрифта. Вставляем в поле ***"Select character set"*** скопированные раннее символы. Не забываем вставить в конце пробел (Рис. 8). 
Рис. 8 Заполнение поля Select character set
В первом пункте "***Select font"*** прикрепим раннее скачанный файл со шрифтом, предварительно его распаковав. Файл имеет расширение **.ttf** В третьем пункте нажимаем на кнопку "**Create MSDF".**\ После того, как шрифт сгенерировался, смотрим на отображение. У вас должны отображаться первые символы введенные во второй пункт. Если отображаются какие-то другие символы или нечто непонятное, необходимо изменить размерность нашего MSDF шрифта (Рис. 9). 
Рис. 9 Изменение размера После того, как отображение текста нас удовлетворило, можем переходить к скачиванию. В пятом пункте присутствует пример того, как можно вставить текст в проект. Давайте его скопируем и вставим в наш код (Рис. 10). 
Рис. 10 Подключение русского языка
Далее необходимо подгрузить два ранее скачанных файла. Файл .json мы можем импортировать воспользовавшись перетаскиванием объектов в левую панель Glitch, либо плюсом и кнопкой "**загрузить файл**" (Рис. 11). 
Рис. 11 Импорт json файла
Для того чтобы загрузить второй файл **.png**, перейдем во вкладку Assets и перетащим туда нашу картинку. Дожидаемся загрузки и после нажатия на нашу картинку копируем url (Рис. 12).  Рис. 12 Получение ссылки на картинку
Так как мы работаем в Glitch, у нас несколько нестандартное расположение файлов. Так как картинка и json-файл лежат в разных директориях, необходимо указать дополнительный атрибут которой будет ссылаться на нее. Нам потребуется атрибут <***font-image>,*** внутрь которого мы вставляем ранее скопированную ссылку (Рис. 13). 
Рис. 13 Вставка текста
Однако, мы не видим нашего текста. Это происходит потому, что его позиция находится под plane. Ее необходимо скорректировать (Рис. 14).
Рис. 14 Корректировка позиционирования текста
Для того, чтобы создавать проекты дополненной реальности, нам потребуется подключить еще две библиотеки связанные с AR.js. [На главной странице](https://ar-js-org.github.io/AR.js-Docs/) документации библиотеки AR.js есть кусочки кода для подключения библиотек. Нам потребуется отслеживать маркеры и позицию людей, поэтому находим **AR.js with Marker Tracking + Location Based AR** и копируем 2 строчки оттуда (Рис. 15). 
Рис. 15 Скрипты для подключения библиотек
Переходим обратно в проект и добавляем скрипты в ***\*** (Рис. 16). 
Рис. 16 Подключение библиотек
Теперь мы можем обновить окно превью и увидеть, что вместо белого пространства появляется изображение с нашей камеры. Для создания дополненной реальности нам понадобится еще одни тег — **\
Рис. 17 Location Based - gps-camera
Gps-camera имеет множество атрибутов. Но нам понадобятся только несколько из них. Первый это ***simulateLatitude*** - симуляция долготы и широты, она позволит нам произвести быструю отладку относительно той местности, на которой мы будем выстраивать дополнительные точки, которые будут отображаться в дополненной реальности. Посмотрим как узнать свою долготу и широту на примере яндекс.карт (Рис. 18). 
Рис. 18 Определение координат от яндекс.карт
Введем нужный нам адрес в поисковую строку. И настроим местоположение так, чтобы плюсик указывал на нужную нам точку. Окошко в правом нижнем углу выводит массив из двух переменных - долготы и широты (Рис. 19). 
Рис. 19 Координаты выбранной позиции Скопируем координаты и перенесем их в свой проект. Пока в закомментированном виде (Рис. 20).
Вернемся к атрибутам из нашей документации. У нас есть ***simulateLatitude*** и ***simulateLongitude.*** Скопируем эти атрибуты и вставим из в проект. Примитивы из кода мы можем удалить (Рис. 21).
Вернемся обратно в документацию и увидим еще один тег - ***gps-entity-place***. Он позволяет указывать местоположение наших примитивов. Скопируем пример и вставим его в проект. Вернемся в яндекс.карты и заменим ***\
Обновим превью. Можно заметить, что объект очень маленький, это необходимо исправить. Для этого подкорректируем тег \
В библиотеке Aframe также есть тег \
Рис. 24 Работа с кодом
Давайте посмотрим, как вставлять наши объекты в цикле. Допустим, у нас есть массив, где указано название, долгота и широта нашего объекта. Мы будем создавать блоки, которые отображаются, с помощью Java Script и добавлять их на сцену . Создаем новый тег \
Рис. 25 Создание массива
После массива введем команду ***window\.onload,*** которая дожидается полной загрузки страницы и выполняет алгоритм, который в нее вложен. Внутри мы ссылаемся на тег ***a-scene*** и записываем его в переменную *scene (Рис. 26).*
После этого мы перебираем наш массив *place* с помощью функции ***for each*** и в скобках указываем, как будет называться один элемент данного массива. После чего мы начинаем создавать новые элементы, которые будут типа ***а-entity** (Рис. 27).* 
Рис. 27 Работа с кодом
Давайте подгрузим какую-нибудь картинку. Для этого добавим в атрибут **material** свойство **src,** где сошлемся на добавленную картинку в \
Для того, чтобы подгружаемое изображение поддерживало прозрачность, добавим стиль наложения в скрипте (Рис. 29).
Запустим превью. Видим, что локации отображаются и они на разном расстоянии, как мы и прописывали (Рис. 30). 
Рис. 30 Отображение локаций
Добавим наименование к каждой локации. Для этого воспользуемся атрибутом **text**. Давайте добавим и подключим наш кастомный шрифт с русскими символами. Для того, чтобы мы могли работать с массивом наименований, поставим косые скобки и сошлемся на вторые элементы массива. Также добавим черный цвет текста, подкорректируем размер с положением и контур (Рис. 31). 
Рис. 31 Работа с кодом
Перейдем в превью. Камера дергается, так как находится в статичном устройстве. Однако, мы работаем с мобильными устройствами, поэтому нашу камеру нужно контролировать. Для этого у нас в камере есть несколько параметров, которые смогут нам помочь (Рис. 32). 
Рис. 32 Добавление текста
Вернемся к [документации AR.js](https://ar-js-org.github.io/AR.js-Docs/location-based/#gps-camera) . У нас есть минимальная (minDistance) и максимальная (maxDistance) дистанции, это относится к тому, сколько у нас видит камера на текущий момент. Допустим, ***minDistance*** = 2 м, тогда пользователь не будет видеть метки, которые ближе к нему, чем два метра. Это делается для того, чтобы контент не перекрывал друг или, возможно, в этом месте вы хотите, чтобы пользователь нашел что-то уже без ваших подсказок. Максимальная дистанция - это то, насколько далеко пользователь будет видеть метки. В некоторых случаях эта дистанция увеличится до такой степени, что наши 3d-объекты станут очень маленькими, но если вы работаете с картой всего города, то максимальную дистанцию тоже следует ограничивать. Так как элементы прогружаются и занимают память устройства. Еще одно свойства камеры - ***gpsMinDistance***, которое следует указывать, когда мы работаем с мобильными устройствами. Оно позволяет нам отслеживать камеру и ее движение не постоянно, а на определенной дистанции. Условная дистанция это 5 метров, чем больше число, тем меньше движений и колебаний будет учитываться. Добавим значения **\
Рис. 33 Работа с кодом
Запустим превью и скопируем ссылку на демонстрацию с мобильного устройства.