FlyControls и FirstPersonControls

Библиотека Three.js предоставляет несколько систем управления камерой, позволяющих создавать интерактивные 3D-сцены. Среди них FlyControls и FirstPersonControls являются наиболее гибкими для перемещения по сцене с точки зрения наблюдателя.

FlyControls

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

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

  • movementSpeed — скорость перемещения камеры. Позволяет регулировать, насколько быстро камера проходит через сцену.
  • rollSpeed — скорость вращения камеры по оси z. Позволяет имитировать «наклон» при маневрировании.
  • dragToLook — булевое значение. Если true, вращение камеры осуществляется только при зажатой кнопке мыши.
  • autoForward — если установлено в true, камера будет автоматически двигаться вперед.

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

const controls = new THREE.FlyControls(camera, renderer.domElement);
controls.movementSpeed = 20;
controls.rollSpeed = Math.PI / 24;
controls.dragToLook = true;
controls.autoForward = false;

function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    controls.update(delta);
    renderer.render(scene, camera);
}
animate();

Особенности:

  • Подходит для симуляции полетов или свободного перемещения в виртуальных пространствах.
  • Не имеет ограничений по вертикальному движению.
  • Движение и вращение камеры полностью независимы друг от друга, что позволяет создавать сложные траектории.

FirstPersonControls

FirstPersonControls предназначены для эмуляции перемещения с точки зрения человека, находящегося внутри сцены. В отличие от FlyControls, движение камеры обычно ограничено горизонтальной плоскостью, что приближает поведение к реальному передвижению человека.

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

  • movementSpeed — скорость перемещения.
  • lookSpeed — чувствительность вращения камеры при движении мышью.
  • lookVertical — разрешает или запрещает вертикальное вращение.
  • constrainVertical — ограничивает вращение по вертикали в пределах verticalMin и verticalMax.
  • verticalMin и verticalMax — минимальный и максимальный угол вертикального обзора.

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

const controls = new THREE.FirstPersonControls(camera, renderer.domElement);
controls.movementSpeed = 10;
controls.lookSpeed = 0.1;
controls.lookVertical = true;
controls.constrainVertical = true;
controls.verticalMin = 1.0;
controls.verticalMax = 2.0;

function animate() {
    requestAnimationFrame(animate);
    const delta = clock.getDelta();
    controls.update(delta);
    renderer.render(scene, camera);
}
animate();

Особенности:

  • Идеально подходит для симуляции движения «от первого лица» в играх или виртуальных турах.
  • Движение по вертикали обычно ограничено, что предотвращает неестественные перекаты камеры.
  • Поддерживает сочетание клавиш WASD для перемещения и мыши для управления взглядом.

Сравнение FlyControls и FirstPersonControls

Свойство FlyControls FirstPersonControls
Полное 3D движение Да Нет (обычно ограничено горизонтально)
Вращение вокруг всех осей Да Обычно только yaw/pitch
Эмуляция человека Нет Да
Использование в играх Симуляторы полета FPS и виртуальные туры
Настройка скорости movementSpeed, rollSpeed movementSpeed, lookSpeed
Ограничение вертикали Нет Да (constrainVertical)
Движение вперед без ввода autoForward Нет

Тонкости интеграции с Three.js

  1. Обновление контролов через delta Оба контроллера требуют передачи времени между кадрами (clock.getDelta()) в метод update(), чтобы движение оставалось плавным при изменении частоты кадров.

  2. События мыши и клавиатуры Контролы автоматически обрабатывают ввод мыши и клавиатуры, но могут конфликтовать с другими библиотеками событий. В таких случаях нужно использовать отдельные обработчики событий и передавать их контролам.

  3. Совмещение с анимацией сцены Контролы не блокируют основную функцию animate(), поэтому их легко интегрировать с объектами, анимациями и постэффектами. Обновление камеры должно выполняться перед рендерингом.

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

  5. Производительность Частое обновление матриц камеры и обработка ввода может влиять на FPS в больших сценах. Оптимизация заключается в минимизации числа объектов и включении frustum culling.

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

  • Для симуляторов космического полета лучше использовать FlyControls, так как они не ограничивают движение по вертикали.
  • Для игр с видом от первого лица или виртуальных экскурсий в зданиях предпочтительны FirstPersonControls, поскольку они имитируют человеческое передвижение и взгляд.
  • Смешанные сценарии можно реализовать динамической заменой контроллера, например, переключаясь между FlyControls и FirstPersonControls при входе в разные зоны сцены.
  • Настройка скорости и ограничений вращения позволяет добиться максимально естественного поведения камеры и улучшить UX.

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

Оглавление