it Новости Библиотека AR.js / Дополненная реальность в браузере
Библиотека AR.js / Дополненная реальность в браузере

Библиотека AR.js / Дополненная реальность в браузере

1 835
15 мая 2020 в 16:46

Дополненная реальность - это целый тренд. В статье мы рассмотрим работу с библиотекой AR.js, которая позволяет буквально за несколько строк кода добавить дополненную реальность.

Современным разработчикам все труднее и труднее найти крутые и интересные решения, которые бы заставили клиента оставаться на сайте как можно дольше. В качестве уловок на сайтах делают крутую анимацию, добавляют различные 3D объекты, создают практически целые мультики из сайта, а также реализуют полноценную дополненную реальность, при чём такую, что для её использования понадобиться лишь компьютером с вебкой или же телефон с камерой.


Посмотреть подборку крутых сайтов с оригинальным дизайном можно в нашей статье по этой ссылке.


Разработка приложения

Для создания программы на основе Ar JS необходимо лишь создать HTML файл и подключить в него соотвествующие библиотеки. 


Все описание AR объектов располагается в так званом A-Frame. Внутри него можно указать маркер (картинка, на которой будут показаны объекты), используемую камеру, а также виртуальный объект. 


Объект обязательно должен быть в формате GLTF (Graphics Library Transmission Format). Найти такие объекты можно на сайте SketchFab. Зайдите на сайт, зарегистрируйтесь, найдите бесплатную модель и скачайте одну из них. Распакуйте скачанный файл и пропишите полный путь к файлу 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 AR. В ходе курса вы изучите не только движок Unity, но также научитесь писать приложения с дополненной реальностью на основе Unity и Vuforia.


Больше интересных новостей

Комментарии для сайта Cackle