В настоящее время многие устройства позволяют пользователю создавать очень интересные панорамные изображения, но не только с 180 градусами, а с 360. В отличие от цилиндрических видов, сферические панорамы включают вертикальный угол обзора 180 ° и горизонтальный угол обзора 360 °. Они содержат световые данные, поступающие со всех сторон, и поэтому могут быть визуализированы как составляющие точки на сфере. Этот формат стал популярным в социальных сетях и маркетинге и нашел применение в программах для трехмерной графики, имитации интерьеров, захватывающих панорамных фильмов, компьютерных и видеоигр. Равноугольная панорама состоит из одного прямоугольного изображения, ширина и высота которого соотносятся как 2: 1.
Если вы хотите показывать подобные изображения в Интернете, вам понадобится специальный фрагмент кода, чтобы он работал. В этой статье мы поделимся с вами 7 библиотеками, которые позволят вам вставлять в браузер равносторонние изображения, чтобы пользователь мог легко взаимодействовать с темой.
7. Three.js Equirectangular Demo
В отличие от Panolens.js, который также основан на Three.js, эта базовая демонстрация содержит базовый код для реализации вашей собственной программы просмотра изображений 360 только с Three.js.
6. 360 изображений для просмотра
360-image-viewer — это автономный просмотрщик панорамных изображений WebGL для настольных и мобильных устройств. Он использует regl в качестве оболочки WebGL и имеет в общей сложности 140 килобайт в разобранном виде или 46 килобайт в сжатом виде. Это полезно, если вам нужен просмотрщик панорамы, но вы не хотите встраивать все ThreeJS (с добавлением около 500 КБ).
5. Калейдоскоп
Kaleidoscope — это встраиваемый, легкий, независимый от 360 ° просмотрщик видео / изображений. 360 видео не работает в Safari, IE 11, Microsoft Edge, Android и iOS, если видео подается из другого домена, из-за некоторых ошибок реализации CORS.
4. Panolens.js
Panolens.js основан на Three.JS (3D-фреймворке) с особым интересом к панораме, виртуальной реальности и потенциально дополненной реальности. Чтобы начать использовать panolens.js, загрузите minified three.js и minified panolens.js и включите эти два файла в свой проект. Особенности плагина:
- Поддержка равностороннего изображения
- Поддержка изображений cubemap
- Поддержка Google StreetView с PanoId (Как получить Panorama ID)
- Поддержка 360 прямоугольных видео (например, YouTube / видео 360) даже на iOS!
- Поддержка аннотаций text / image / domElement (Infospot)
- Встроенные элементы управления камерой Orbit / DeviceOrientation
- Встроенные полноэкранные и виджеты управления видео
- Преобразование равностороннего изображения в маленькую планету (стереографическая проекция)
3. Panellum
Pannellum — это легкая, бесплатная программа для просмотра панорам с открытым исходным кодом для Интернета. Созданный с использованием HTML5, CSS3, JavaScript и WebGL, он не требует подключаемых модулей. Pannellum построен с использованием WebGL и JavaScript, с добавлением HTML5 и CSS3. Он может работать автономно или может быть встроен с использованием