A-Frame – проект, созданный для того, чтобы «создавать блоки для виртуальной реальности»; это библиотека для браузеров, использующих HTML или JavaScript. Проект можно описывать бесконечно, так что давайте начнем с простого: создадим интерактивную панораму!
Делаем 3D-изображение (панораму)
Самый простой способ сделать подходящее изображение – это сделать панорамный снимок с помощью мобильного телефона. Создание качественной фотографии может быть небольшой проблемой – нужны недрожащие руки, чтобы избежать зазубренных краев при вращении телефона в момент съемки панорамы.
Для демонстрации используется пример изображения, предоставляемого A-Frame, потому что изображение Google Street View получилось равным 7Mb, а это, сами понимаете, очень много. Если вы хотите посмотреть, что я сделал с помощью приложения GSV, вы можете найти изображение здесь.
Создание эффекта панорамы с помощью A-Frame
Хотите верьте, хотите – нет, но создание хорошего изображения – это сложная и важная часть, т.к. A-Frame делает переход изображения в 3D очень просто. Элемент <a-sky> будет использоваться A-Frame для создания эффекта панорамы:
<a-scene>
<a-sky src="/3d-image.jpg" rotation="0 -130 0"></a-sky>
</a-scene>
Код сверху, написанный на HTML – пример декларативного использования A-Frame; также можно использовать JavaScript для создания этого элемента:
// Создаем сцену
var scene = document.createElement('a-scene');
// Создание неба
var sky = document.createElement('a-sky');
sky.src = '3d-image.jpg';
sky.setAttribute('rotation', { x: 0, y: -130, y: 0 });
// Внедряем на страницу
scene.appendChild(sky);
document.body.appendChild(scene);
Атрибут rotation принимает разделенные пробелами x, y и z значения оси вращения; вы можете поиграть с ними, чтобы настроить расположение точки обзора.
A-Frame позволяет кликать, зажимать и перетягивать компоненты, чтобы вращать изображение. Можно также кликнуть иконку ВР-очков, чтобы посмотреть изображение на своем телефоне в формате 3D или в браузере с поддержкой WebVR.
Смотреть пример.
С A-Frame сделать 3D проще простого!
Я не преувеличивал, когда говорил, что создание фотографии является одной из самых важных и сложных частей; количество разметки, необходимое для создания эффекта 3D-панорамы минимально, когда вы используете возможности A-Frame. Создание панорам нынче довольно популярно, а с помощью A-Frame можно усовершенствовать результаты. Хотите посмотреть, что еще можно еще можно сделать с помощью A-Frame? Ознакомьтесь с примерами на официальном сайте и ждите новых статей о WebVR – развивающейся новой фишке!