Создание панорамных изображений с помощью A-Frame

Опубликовано: 25 июля 2016 г.
  • верстка
  • Пример
  • Скачать
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 – развивающейся новой фишке!

Популярные статьи
2D игра на Unity. Подробное руководство. Часть 1
  • unity
2D игра на Unity. Подробное руководство. Часть 1
Адаптивный слайдер без Javascript на CSS3
  • слайдер
Адаптивный слайдер без Javascript на CSS3
Работа с Unity в 2D
  • unity
Работа с Unity в 2D
2D игра на Unity. Подробное руководство. Часть 3
  • unity
2D игра на Unity. Подробное руководство. Часть 3
2D игра на Unity. Подробное руководство. Часть 4
  • unity
2D игра на Unity. Подробное руководство. Часть 4
2D игра на Unity. Подробное руководство. Часть 5
  • unity
2D игра на Unity. Подробное руководство. Часть 5
2D игра на Unity. Подробное руководство. Часть 6
  • unity
2D игра на Unity. Подробное руководство. Часть 6
Учебник по новому GUI в Unity. Часть 2.
  • unity
Учебник по новому GUI в Unity. Часть 2.
Учебник по новому GUI в Unity. Часть 1.
  • unity
Учебник по новому GUI в Unity. Часть 1.

HTML LESS LESS React
Онлайн журнал для профессиональных веб-дизайнеров и программистов
БлогПлагиныГрафикаИнструменты
CanvasSPAcssjavascriptjqueryphotoshopphpunitywordpress{"fieldValue":[{"image_preview":"","image_demo":"","example":""}],"fieldSettings":{"autoincrement":1}}{"fieldValue":[{"image_preview":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","image_demo":"https://cdn-images-1.medium.com/max/800/1*OIBUnA4NokXK14IMR5csTw.jpeg","example":""}],"fieldSettings":{"autoincrement":1}}Аудио/Видеоаккордеонанимациябазы данныхбраузерные игрыверсткагалереяграфикакартыкнопкименюпараллаксподсказкипопаппрелоадерслайдертаймерформычекбоксыэлементы интерфейса
© 2009-2017 WebSketches.ru