Как я могу динамически рассчитать hfov для панорамы Pannellum, чтобы она соответствовала изображению 16:9 с объектной по ⇐ CSS

[Anonymous]

Итак, я использую Pannellum для отображения панорам. На моем сайте некоторые виды представляют собой статические изображения, а некоторые — панорамы. Во многих из них есть видео для перехода между ними, которые были созданы таким образом, чтобы они точно соответствовали статичным изображениям и первоначальным видам панорам. Однако это работает только с соотношением сторон 16:9, в котором были созданы изображения и видео.
Необходимо избегать использования почтовых ящиков, поэтому изображения и видео должны заполнять область просмотра объектом. -fit: обложка, то есть некоторые части обрезаются при соотношении сторон, отличном от 16:9. В основном я тестировал с соотношением сторон ниже этого, поскольку iPad является ключевым целевым устройством для сайта, и при таких соотношениях сторон левая и правая стороны изображения обрезаются.
Это вызывает проблемы, поскольку видеопереходы между Pannellum и следующим представлением больше не совпадают. Если для Pannellum установлено значение hfov по умолчанию, равное 100, соотношение сторон ниже 16:9 приведет к расширению верхней и нижней части изображения, сохраняя при этом одно и то же содержимое. Однако этот дополнительный визуальный контент отсутствует в видео формата 16:9, поэтому при обрезке видео создается впечатление, что оно резко увеличивается.
Регулировка hfov в Pannellum Конфигурация просмотра решает эту проблему, но необходимое значение hfov будет разным для каждого соотношения сторон, и я не могу найти формулу для динамической настройки hfov на основе соотношения сторон.
Ниже — это упрощенный пример, демонстрирующий проблему. Здесь я только что использовал статическое изображение для представления видеопереходов, но оно работает точно так же. При разрешении 16:9, без перемещения или масштабирования панорамы, они идеально совпадают. Однако измените соотношение сторон на 1, после того момента, когда изображение больше не может масштабироваться по размеру, и вы увидите поведение «увеличения» при переключении между ними.
CodePen:
https://codepen.io/Carces/pen/GRaqybR
HTML:





Show static






CSS:
* {
border: 0;
padding: 0;
margin: 0;
}

body {
height: 100vh;
width: 100vw;
overflow: hidden;
}

.content-container {
width: 100vw;
height: 100vh;
position: relative;
}

.content {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100vw;
height: 100%;
object-fit: cover;
object-position: bottom;
}

#view-toggle {
position: absolute;
top: 10px;
right: 10px;
z-index: 5;
padding: 5px;
background-color: blue;
color: white;
}

.behind {
z-index: 1 !important;
}

JavaScript:
document.addEventListener('DOMContentLoaded', (element) => {
pannellum.viewer('panorama', {
type: 'cubemap',
cubeMap: [
'https://corsproxy.io/?' + encodeURIComponent(''),
'https://corsproxy.io/?' + encodeURIComponent(''),
'https://corsproxy.io/?' + encodeURIComponent(''),
'https://corsproxy.io/?' + encodeURIComponent(''),
'https://corsproxy.io/?' + encodeURIComponent(''),
'https://corsproxy.io/?' + encodeURIComponent(''),
],
pitch: 0,
yaw: 0,
hfov: 100,
autoLoad: true,
autoRotate: 0,
showControls: false,
});
});

let currentView = 'panorama';

function toggleView(event) {
const staticImage = document.getElementById('static-image');
const panorama = document.getElementById('panorama');
if (currentView === 'static-image') {
panorama.classList.remove('behind');
staticImage.classList.add('behind');
currentView = 'panorama';
event.target.innerText = 'Show static'
} else {
staticImage.classList.remove('behind');
panorama.classList.add('behind');
currentView = 'static-image';
event.target.innerText = 'Show panorama'
}
}


Подробнее здесь: https://stackoverflow.com/questions/785 ... -up-with-a