Не работает AR?
Возможное решение
О чём речь
Приветствую всех! Недавно я столкнулся с проблемой: мой 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.
Желаю Вам удачи и успехов! 🤝