Современным разработчикам все труднее и труднее найти крутые и интересные решения, которые бы заставили клиента оставаться на сайте как можно дольше. В качестве уловок на сайтах делают крутую анимацию, добавляют различные 3D объекты, создают практически целые мультики из сайта, а также реализуют полноценную дополненную реальность, при чём такую, что для её использования понадобиться лишь компьютером с вебкой или же телефон с камерой.
Посмотреть подборку крутых сайтов с оригинальным дизайном можно в нашей статье по .
Разработка приложения
Для создания программы на основе Ar JS необходимо лишь создать HTML файл и подключить в него соотвествующие библиотеки.
Все описание AR объектов располагается в так званом A-Frame. Внутри него можно указать маркер (картинка, на которой будут показаны объекты), используемую камеру, а также виртуальный объект.
Объект обязательно должен быть в формате GLTF (Graphics Library Transmission Format). Найти такие объекты можно на сайте . Зайдите на сайт, зарегистрируйтесь, найдите бесплатную модель и скачайте одну из них. Распакуйте скачанный файл и пропишите полный путь к файлу scene.
Теперь можно тестировать и для этого нужен сервер, при чём подойдет даже локальный сервер. Если же тестировать через простое открытие файла в браузере, то скорее всего ничего не заработает. Плюс, будет хорошо, если в будущем ваш проект будет находится на сайте что использует защищенный протокол https, иначе доступ к камере будет блокироваться.
Ниже приведен весь код созданного проекта:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>AR in Web</title>
</head>
<body>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
<a-scene embedded arjs>
<a-marker preset="hiro">
<a-entity
position="0 0 0"
scale="1 1 1"
gltf-model="obj/scene.gltf"
></a-entity>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
</body>
</html>Видео на эту тему
Также вы можете просмотреть детальное видео по AR JS:
Дополнительный курс
На нашем сайте также есть углубленный курс по . В ходе курса вы изучите не только движок Unity, но также научитесь писать приложения с дополненной реальностью на основе Unity и Vuforia.