Ограничения и настройки OrbitControls

OrbitControls — это мощный инструмент для управления камерой в сцене Three.js. Он позволяет вращать, масштабировать и панорамировать камеру вокруг целевой точки. Чтобы создавать удобные и безопасные интерактивные сцены, важно понимать, как настроить ограничения и параметры OrbitControls.

Основные параметры ограничения вращения

OrbitControls предоставляет несколько ключевых свойств, отвечающих за ограничения вращения камеры:

  1. minAzimuthAngle и maxAzimuthAngle Определяют границы горизонтального вращения камеры.

    • Значения задаются в радианах.
    • Например:
    controls.minAzimuthAngle = -Math.PI / 4; // минимальный угол влево
controls.maxAzimuthAngle = Math.PI / 4;  // максимальный угол вправо

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

  2. minPolarAngle и maxPolarAngle Контролируют вертикальное вращение камеры (подъём и наклон).

    • 0 соответствует положению прямо над целью (сверху), Math.PI — прямо под целью (снизу).
    • Пример ограничения вертикального диапазона:
    controls.minPolarAngle = Math.PI / 6;  // минимальный угол вниз
controls.maxPolarAngle = Math.PI / 2;  // максимальный угол вверх

    Это предотвращает «переворот» камеры и нежелательные виды снизу или сверху.

Ограничения масштабирования

Управление приближением камеры через OrbitControls регулируется следующими параметрами:

  1. minDistance и maxDistance Определяют минимальное и максимальное расстояние камеры до целевой точки:

    controls.minDistance = 5;
controls.maxDistance = 50;

    Это особенно важно для предотвращения выхода камеры за пределы сцены или столкновений с объектами.

  2. enableZoom Логическое свойство, разрешающее или запрещающее масштабирование:

    controls.enableZoom = true;  // включить масштабирование
controls.enableZoom = false; // отключить масштабирование

Панорамирование

Панорамирование (panning) управляет смещением камеры без вращения. Основные настройки:

  1. enablePan Включает или отключает возможность панорамирования:

    controls.enablePan = true;
controls.enablePan = false;

  2. panSpeed Определяет скорость панорамирования относительно перемещения мыши:

    controls.panSpeed = 1.0;  // стандартная скорость

Настройка чувствительности

Чувствительность вращения и масштабирования регулируется следующими свойствами:

  • rotateSpeed — скорость вращения камеры:

    controls.rotateSpeed = 1.2;

  • zoomSpeed — скорость приближения/удаления камеры:

    controls.zoomSpeed = 1.0;

  • dampingFactor — коэффициент плавности движения камеры при включенном enableDamping:

    controls.enableDamping = true;
controls.dampingFactor = 0.05;

Ограничение вращения на конкретную ось

Для некоторых задач требуется зафиксировать вращение вокруг определённых осей. Можно использовать комбинацию min/max углов и ограничение с enableRotate:

controls.enableRotate = true;
controls.minPolarAngle = Math.PI / 3; // фиксирование вертикального диапазона
controls.maxPolarAngle = Math.PI / 3;
controls.minAzimuthAngle = 0;          // горизонтальный фиксированный угол
controls.maxAzimuthAngle = 0;

В результате камера будет вращаться только в пределах заданного диапазона или оставаться зафиксированной.

Особенности использования с камерой

  • Ограничения должны согласовываться с типом камеры:

    • PerspectiveCamera требует тщательной настройки minDistance и maxDistance.
    • OrthographicCamera лучше использовать с ограничением панорамирования через screenSpacePanning.

  • При работе с динамическими сценами стоит регулярно обновлять controls.target, чтобы вращение происходило вокруг актуального центра интереса:

controls.target.set(0, 1, 0);
controls.update();

Практические советы

  1. Для предотвращения «залипания» камеры при резком вращении включают enableDamping.
  2. При сложных сценах с большим количеством объектов полезно ограничивать maxDistance, чтобы избежать выхода камеры за пределы сцены.
  3. Для моделей, которые должны оставаться в кадре, рекомендуется фиксировать minPolarAngle и maxPolarAngle, чтобы пользователь не видел модель «снизу».
  4. В интерактивных приложениях с мобильными устройствами полезно корректировать rotateSpeed и zoomSpeed для сенсорного управления.

Эти настройки позволяют создавать гибкое и предсказуемое поведение камеры в Three.js, обеспечивая контроль над движением пользователя, защиту от нежелательных положений камеры и улучшая пользовательский опыт при интерактивной визуализации.

Оглавление