Фон
Я измеряю все, используя единицы просмотра:
body {
font-size: calc((1vw + 1vh) / 2);
}
h6 {
font-size: 1em;
}
div {
width: 20em;
}
При увеличении количества пикселей на экране увеличивается размер единиц. Например, дисплей 1920 x 1080 будет иметь меньший тип, чем дисплей 2560 x 1080. Это позволяет автоматически поддерживать ультраширокие, вертикальные дисплеи и дисплеи с высоким разрешением (8k или даже 16K) без медиазапросов.
Проблема
Используя Three.js, масштаб объекта реагирует только на высоту экрана. Объект будет иметь такой же размер на мониторе 1920x1080, как и на мониторе 2560x1080. Это связано с тем, что камера Three.js использует вертикальное поле зрения (FOV).
Поведение по умолчанию - 2560x1080 по сравнению с 1080x1080. Обратите внимание: текст становится меньше, но 3D-объект остается того же размера . пример кодекса
Моя попытка
Причина, по которой Three.js реагирует только на высоту, заключается в том, что он использует вертикальный коэффициент поля зрения. Я попытался изменить вертикальное поле на диагональное поле, используя эту формулу, найденную в stackOverflow здесь .
var height = window.innerHeight;
var width = window.innerWidth;
var distance = 1000;
var diag = Math.sqrt((height*height)+(width*width))
var fov = 2 * Math.atan((diag) / (2 * distance)) * (180 / Math.PI);
camera = new THREE.PerspectiveCamera(fov , width / height, 1, distance * 2);
camera.position.set(0, 0, distance);
Полученное поведение противоположно тому, что должно произойти.
текущие результаты
Объекты в Three.js становятся больше только при увеличении высоты области просмотра. Я попытался изменить стандартное вертикальное поле для диагонали. Однако это не сработало.
желаемых результатов
Когда размер области просмотра изменяется, объект должен изменять воспринимаемый размер на основе формулы ((высота области просмотра + ширина области просмотра) / 2). Это обеспечит, и текст, размещенный на странице, останется таким же по отношению к трехмерным объектам. Я хотел бы добиться этого, изменив камеру вместо самих трехмерных объектов.