AR.js и A-Frame уроки: погружение в WebAR

Не работает AR?

Даже взятый с официального сайта AR.js или A-Frame?

Возможное решение

О чём речь

Приветствую всех! Недавно я столкнулся с проблемой: мой WebAR-код перестал работать. Я однажды уже написал и протестировал его, но при последнем запуске получил ошибки.

После некоторых поисков, анализов и попыток решить проблему я выяснил, что в моём случае, а возможно, и в Вашем, были недоступны две подключаемые библиотеки: AR.js и A-Frame. С AR.js я смог решить проблему, о чём будет рассказано ниже, но с A-Frame ситуация остаётся неразрешимой, пока сами разработчики библиотеки не устранят недочёт.

Проблема заключается в том, что A-Frame в своём коде обращается к cdn.aframe.io, который периодически перестаёт работать. И пока мы не можем ничего с этим поделать. Однако я расскажу, как обойти эту проблему, насколько это возможно.

Решение проблемы с AR.js

Чтобы устранить проблему, я установил AR-инструментарий в свой проект. Для этого я загрузил с официального репозитория A-Frame на GitHub ZIP-файл с исходным кодом проекта. Затем, также на GitHub, я скачал версию AR.js, но не самую последнюю, чтобы избежать возможных ошибок, которые могут сделать мой код неработоспособным. Это сэкономило мне много нервов, сил и времени.

Кстати, если у вас возникнут проблемы с AR.js, попробуйте изменить версию. В моём случае только смена версии помогла решить проблему.

После загрузки я распаковал оба ZIP-файла в одну папку, которую назвал «ar_libraries». Затем я заменил удаленное подключение AR-инструментария на локальное, подключив те же скрипты, но уже из этой папки. Такой подход позволил мне защитить свои проекты от периодической неработоспособности, возникающей из-за теперь уже часто выходящих из строя серверов AR-компаний.

В итоге код в разделе head был заменён на следующий:

                                        
<script src="ar_libraries/aframe-master/dist/aframe-v1.6.0.min.js"></script>
<script src="ar_libraries/AR.js-3.4.0/aframe/build/aframe-ar.js"></script>
                                        
                                    

И вот, наконец, моя WebAR-программа работает! 💃

В следующих уроках я буду применять исключительно локальное подключение AR-инструментария.

А что насчёт A-Frame?

Всё очень просто: не работайте с текстом. В AR.js, кстати, тоже. Дело в том, что обе библиотеки между собой немного связаны и зависят от cdn.aframe.io. При использовании как тега <a-text></a-text>, так и тега <a-entity text="..."></a-entity> происходит запрос к данному cdn, и из-за этого созданные проекты могут давать сбои. Будем ждать, пока разработчики исправят эту проблему.

Postscriptum.

Если у Вас уже был код проекта на Codepen, что очень удобно, то для загрузки файлов туда Вам необходимо перейти на платный план.

Поэтому при изучении WebAR-программирования с использованием песочниц могут возникнуть некоторые трудности.

Один из верных способов — тестировать код локально, запуская его на своём компьютере и открывая метку на телефоне. Однако, на мой взгляд, это не самый удобный вариант.

Поэтому я рекомендую использовать GitHub Pages для загрузки проекта. В этом случае Вы сможете открывать маркер на компьютере или распечатать его на бумаге, что более ближе к предназначению AR.

Желаю Вам удачи и успехов! 🤝

Помощь

Система комментирования SigComments
Created by Ustinov Corporation