TrackballControls

TrackballControls — это инструмент для интерактивного управления камерой в сцене Three.js. В отличие от простых контроллеров, таких как OrbitControls, TrackballControls предоставляет более гибкое и естественное вращение камеры вокруг объекта, с эффектом «вращения шара», позволяя реализовать динамичные и реалистичные интерфейсы навигации. Он полезен при работе с 3D-моделями, визуализацией данных и сценами, где требуется полный контроль над положением и ориентацией камеры.

Подключение и инициализация

TrackballControls не включён в основной пакет Three.js и импортируется из модуля examples/jsm/controls/TrackballControls.js.

import * as THREE from 'three';
import { TrackballControls } from 'three/examples/jsm/controls/TrackballControls.js';

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const controls = new TrackballControls(camera, renderer.domElement);

При инициализации необходимо передать два параметра: камеру и DOM-элемент рендерера. Камера будет управляться контроллером, а DOM-элемент отвечает за обработку событий мыши и касания.

Основные свойства

TrackballControls имеет ряд ключевых свойств, которые определяют поведение камеры:

  • rotateSpeed — скорость вращения камеры при перемещении мыши. Значение по умолчанию: 1.0.
  • zoomSpeed — скорость масштабирования сцены при прокрутке колесика мыши. Значение по умолчанию: 1.2.
  • panSpeed — скорость панорамирования камеры. Значение по умолчанию: 0.3.
  • noRotate, noZoom, noPan — булевы флаги, отключающие вращение, масштабирование или панорамирование соответственно.
  • staticMoving — если true, камера движется без инерции; если false, применяется эффект плавного замедления при отпускании мыши.
  • dynamicDampingFactor — коэффициент замедления при динамическом движении. Рекомендуемые значения от 0.1 до 0.5.

Пример настройки:

controls.rotateSpeed = 1.5;
controls.zoomSpeed = 2.0;
controls.panSpeed = 0.5;
controls.staticMoving = false;
controls.dynamicDampingFactor = 0.2;

Методы управления

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

  • upd ate() — ключевой метод, который необходимо вызывать в цикле анимации для применения всех изменений.
  • reset() — возвращает камеру и контроллер в исходное состояние.
  • handleResize() — обновляет внутренние параметры при изменении размеров окна.
  • addEventListener('change', callback) — позволяет отслеживать изменения позиции камеры, полезно для перерисовки сцены только при движении камеры.

Пример использования в анимации:

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

Вращение, масштабирование и панорамирование

TrackballControls реализует три основные функции:

  1. Вращение — при зажатой левой кнопке мыши камера вращается вокруг целевой точки сцены. Вращение интуитивно зависит от движения мыши, а направление и скорость настраиваются через rotateSpeed и dynamicDampingFactor.

  2. Масштабирование — колесо мыши изменяет расстояние камеры до целевой точки. Можно также использовать среднюю кнопку мыши для масштабирования. Настройки через zoomSpeed.

  3. Панорамирование — с помощью правой кнопки мыши или комбинации клавиш (например, Ctrl + левая кнопка) камера смещается параллельно плоскости экрана. Скорость панорамирования регулируется через panSpeed.

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

Ограничение и целевая точка

TrackballControls использует свойство target для определения точки, вокруг которой вращается камера. По умолчанию это центр сцены (0,0,0).

controls.target.se t(1, 1, 0);

После изменения target рекомендуется вызвать controls.update(), чтобы корректно пересчитать матрицу камеры. Это позволяет фокусироваться на конкретных объектах сцены или перемещать центр вращения в динамических приложениях.

Поддержка касаний

TrackballControls полностью поддерживает сенсорные устройства. Основные жесты:

  • Одно касание — вращение.
  • Два касания — масштабирование и панорамирование.
  • Инерция и динамическое замедление также работают с жестами.

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

Интеграция с другими элементами Three.js

TrackballControls хорошо сочетается с другими инструментами Three.js:

  • Raycaster — позволяет выбирать объекты в сцене при взаимодействии с камерой.
  • Stats.js — для мониторинга производительности в режиме реального времени.
  • GUI — динамическое изменение параметров контроллера в интерфейсе управления.

Пример интеграции с GUI:

const gui = new dat.GUI();
gui.add(controls, 'rotateSpeed', 0, 5);
gui.add(controls, 'zoomSpeed', 0, 5);
gui.add(controls, 'panSpeed', 0, 2);

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

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

  • TrackballControls не поддерживает коллайдеры камеры; камера может проходить через объекты.
  • При больших сценах с большим количеством объектов инерция может создавать визуально неудобные движения, поэтому рекомендуется подбирать dynamicDampingFactor аккуратно.
  • Контроллер обновляет камеру напрямую, что делает его несовместимым с библиотеками, которые требуют синхронизации состояния камеры через анимационные слои.

TrackballControls остаётся мощным инструментом для создания интерактивных 3D-приложений, где требуется гибкое и естественное управление камерой с эффектом шарового вращения, плавной инерцией и поддержкой сенсорных устройств. Его свойства, методы и возможности интеграции позволяют реализовать широкий спектр пользовательских интерфейсов и визуализаций в Three.js.

Оглавление