Three.js - Орфографическая камера

Question

Я работаю над приложением, которое отображает некоторые 3D-модели. Мы загружаем модели, создаем сетки, добавляем их в сцену... стандартная процедура. После добавления последней сетки мы вычисляем ограничивающий прямоугольник, чтобы переместить камеру и покрыть всю сцену, используя размер общей геометрии и размер области просмотра для выполнения математических операций.

    if (bounds.bx / bounds.by < camera.aspect) {
        /* Vertical max */
        r = bounds.by / (2 * Math.tan(Math.PI / 8));
    } else {
        /* Horizontal max */
        hFOV = 2 * Math.atan(Math.tan(Math.PI / 8) * camera.aspect);
        r = bounds.bx / (2 * Math.tan((hFOV / 2)));
    }

bounds является объектом, содержащим ширину и высоту ограничительной рамки. После этого расчета мы перемещаем камеру (плюс небольшое соотношение, просто эстетику, нам нужно немного места между геометрией и границей экрана:)) и визуализируем

    camera.position.z = r * 1.05;

Пока это реализовано и работает нормально. Это было сделано с PerspectiveCamera. Теперь мы хотим изменить это и использовать OrthographicCamera... оказывается беспорядком. Модели слишком малы, мы теряем масштаб колесика мыши из элементов управления TrackBall, и алгоритм перемещения камеры больше не работает. Также я не понимаю параметры конструктора для камеры... эти ширина и высота для геометрии или области просмотра?

Answer 1

Шаблон для создания орфографической камеры в three.js:

var camera = new THREE.OrthographicCamera( width / - 2, width / 2, height / 2, height / - 2, near, far );

где width а также height являются шириной и высотой кубовидной формы камеры, измеренной в единицах мирового пространства.

near а также far являются расстояниями в мировом пространстве до ближних и дальних плоскостей усеченного конуса. И то и другое near а также far должно быть больше нуля.

Чтобы предотвратить искажение, вы обычно хотите, чтобы соотношение сторон орфографической камеры (width / height), чтобы соответствовать пропорциям холста рендера. (см. * Примечание ниже)

К сожалению, многие из примеров three.js проходят window.innerWidth а также window.innerHeight как аргументы к этому конструктору. Это имеет смысл, только если для рендеринга в текстуру используется орфографическая камера, или если мировые единицы для вашей орфографической сцены указаны в пикселях.

---

* Примечание. На самом деле соотношение сторон камеры должно совпадать с соотношением сторон окна просмотра. Окно просмотра может быть субрегионом холста. Если вы не устанавливаете видовой экран визуализатора напрямую, используя renderer.setViewport()размер области просмотра будет такого же размера, как у холста, и, следовательно, будет иметь такое же соотношение сторон, что и у холста.

Three.JS R.73

Answer 2

Для дальнейшего использования: хорошее 5мин видео

var w = container.clientWidth;
var h = container.clientHeight;
var viewSize = h;
var aspectRatio = w / h;

_viewport = {
    viewSize: viewSize,
    aspectRatio: aspectRatio,
    left: (-aspectRatio * viewSize) / 2,
    right: (aspectRatio * viewSize) / 2,
    top: viewSize / 2,
    bottom: -viewSize / 2,
    near: -100,
    far: 100
}

_camera = new THREE.OrthographicCamera ( 
    _viewport.left, 
    _viewport.right, 
    _viewport.top, 
    _viewport.bottom, 
    _viewport.near, 
    _viewport.far 
);

Answer 3

            camera.top = (.95*camera.top);
            camera.bottom = (.95*camera.bottom);
            camera.left = (.95*camera.left);
            camera.right = (.95*camera.right);