Работа с камерой

В CesiumJS камера является центральным объектом управления сценой и определяет положение наблюдателя в трёхмерном пространстве. Она интегрирована в объект Viewer через viewer.camera, а также доступна напрямую как экземпляр класса Camera.

Камера работает в контексте сцены Scene, взаимодействует с системой координат Earth-fixed (ECEF) и поддерживает геодезическое представление через широту, долготу и высоту. Любое изменение положения камеры мгновенно отражается на рендеринге глобуса, тайлов и 3D-объектов.

Основные параметры камеры

Камера описывается набором ключевых характеристик:

Положение

  • position — вектор в ECEF (Cartesian3)
  • positionCartographic — географические координаты (долгота, широта, высота)

Ориентация

  • heading — поворот вокруг оси Z (курс)
  • pitch — наклон вверх/вниз
  • roll — вращение вокруг направления взгляда

Эти параметры формируют полное описание ориентации камеры в пространстве.

viewer.camera.position = Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 10000);
viewer.camera.heading = Cesium.Math.toRadians(0.0);
viewer.camera.pitch = Cesium.Math.toRadians(-45.0);
viewer.camera.roll = 0.0;

Прямое управление положением

Установка через Cartesian3

Базовый способ управления — работа с ECEF координатами:

const camera = viewer.camera;

camera.position = new Cesium.Cartesian3(
    1335000.0,
    -4650000.0,
    4130000.0
);
camera.direction = Cesium.Cartesian3.normalize(
    new Cesium.Cartesian3(-1.0, 0.0, -0.5),
    new Cesium.Cartesian3()
);
camera.up = Cesium.Cartesian3.UNIT_Z;

Этот способ используется для точного позиционирования в инженерных задачах и при работе с локальными системами координат.

Привязка к географическим координатам

Часто используется преобразование из географических координат:

camera.position = Cesium.Cartesian3.fromDegrees(
    71.4304,
    51.1284,
    1500
);

Для стабильной работы важно учитывать эллипсоид Земли, используемый в сцене.

Методы навигации камеры

setView

Метод setView мгновенно устанавливает положение без анимации:

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 20000),
    orientation: {
        heading: Cesium.Math.toRadians(20.0),
        pitch: Cesium.Math.toRadians(-30.0),
        roll: 0.0
    }
});

Характерные особенности:

  • отсутствует интерполяция движения
  • применяется для резких переключений между сценами
  • используется в системах навигации и аналитики

flyTo

Метод flyTo обеспечивает плавную анимацию перемещения камеры:

viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 20000),
    orientation: {
        heading: Cesium.Math.toRadians(0),
        pitch: Cesium.Math.toRadians(-45),
        roll: 0
    },
    duration: 3.0
});

Анимация включает:

  • интерполяцию позиции
  • плавное изменение угла обзора
  • сглаживание ускорения и замедления

flyToBoundingSphere

Используется для автоматического кадрирования объектов:

viewer.camera.flyToBoundingSphere(boundingSphere, {
    duration: 2.5,
    offset: new Cesium.HeadingPitchRange(
        Cesium.Math.toRadians(0),
        Cesium.Math.toRadians(-30),
        5000
    )
});

Этот подход применяется при работе с 3D-моделями и группами сущностей.

Управление направлением взгляда

heading, pitch, roll

Ориентация камеры задаётся через три угла:

  • heading — вращение вокруг вертикальной оси
  • pitch — наклон относительно горизонта
  • roll — вращение вдоль оси взгляда
camera.setView({
    orientation: {
        heading: Cesium.Math.toRadians(90),
        pitch: Cesium.Math.toRadians(-20),
        roll: Cesium.Math.toRadians(0)
    }
});

Эти параметры активно используются при создании режимов:

  • орбитального обзора
  • наклонной съёмки
  • следования за объектом

lookAt

Метод lookAt фиксирует камеру на заданной точке:

const target = Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 0);

camera.lookAt(
    target,
    new Cesium.HeadingPitchRange(
        Cesium.Math.toRadians(0),
        Cesium.Math.toRadians(-30),
        10000
    )
);

Особенность метода:

  • камера теряет глобальную независимость
  • координаты становятся относительными к цели
  • требуется сброс через lookAtTransform(Cesium.Matrix4.IDENTITY)

Переход между системами координат

Cesium использует несколько пространств:

  • WGS84 геодезическое пространство
  • Earth-Centered Earth-Fixed (ECEF)
  • локальные касательные плоскости (ENU)

Пример преобразования:

const cartographic = Cesium.Cartographic.fromDegrees(71.4304, 51.1284);
const cartesian = Cesium.Ellipsoid.WGS84.cartographicToCartesian(cartographic);

Камера всегда оперирует Cartesian3, но интерфейс часто требует географические координаты.

Ограничения и управление навигацией

ScreenSpaceCameraController

Контроллер пользовательского ввода:

viewer.scene.screenSpaceCameraController.enableRotate = true;
viewer.scene.screenSpaceCameraController.enableZoom = true;
viewer.scene.screenSpaceCameraController.enableTilt = true;
viewer.scene.screenSpaceCameraController.enableTranslate = true;

Параметры управления:

  • чувствительность вращения
  • скорость зума
  • ограничения наклона

Ограничение высоты и зума

viewer.scene.screenSpaceCameraController.minimumZoomDistance = 100;
viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000;

Ограничения применяются для:

  • предотвращения «ухода» в космос
  • фиксации уровня детализации
  • управления UX навигации

Программное вращение камеры

Повторяющееся вращение

viewer.clock.onTick.addEventListener(function () {
    viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, 0.001);
});

Используется для:

  • автоматического обзора
  • демонстрационных режимов
  • визуализаций движения

Поворот вокруг объекта

viewer.camera.lookAt(
    Cesium.Cartesian3.fromDegrees(71.4304, 51.1284),
    new Cesium.HeadingPitchRange(
        Cesium.Math.toRadians(0),
        Cesium.Math.toRadians(-45),
        5000
    )
);

viewer.clock.onTick.addEventListener(function () {
    viewer.camera.rotateRight(0.002);
});

Анимация и интерполяция движения

Cesium использует внутренние интерполяторы для плавного перехода камеры.

Основные характеристики:

  • интерполяция позиции по дуге сферы
  • сглаживание ускорения (ease in/out)
  • поддержка кастомных callback-функций
viewer.camera.flyTo({
    destination: Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 10000),
    complete: function () {
        viewer.camera.zoomOut(5000);
    }
});

Работа с направлением через векторы

Камера может быть полностью определена через базис:

camera.position = Cesium.Cartesian3.fromDegrees(71.4304, 51.1284, 10000);
camera.direction = Cesium.Cartesian3.normalize(directionVector, new Cesium.Cartesian3());
camera.up = Cesium.Cartesian3.UNIT_Z;

Такой подход используется в:

  • симуляциях полёта
  • интеграции с внешними датчиками
  • системах трекинга

Практические паттерны управления камерой

Следование за объектом

viewer.clock.onTick.addEventListener(function () {
    const position = entity.position.getValue(viewer.clock.currentTime);
    viewer.camera.lookAt(position, new Cesium.Cartesian3(0, -1000, 500));
});

Орбитальная камера

viewer.clock.onTick.addEventListener(function () {
    viewer.camera.rotate(Cesium.Cartesian3.UNIT_Z, 0.002);
});

Фиксированный обзор сцены

viewer.camera.setView({
    destination: Cesium.Cartesian3.fromDegrees(0, 0, 20000000),
    orientation: {
        pitch: Cesium.Math.toRadians(-90),
        heading: 0,
        roll: 0
    }
});
Оглавление