Мультитач и жесты на мобильных устройствах

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

Включение поддержки мультитача

Мобильные устройства используют мультитач-технологию, что позволяет пользователю взаимодействовать с приложением сразу несколькими пальцами. В Babylon.js поддержка мультитача включена по умолчанию, и библиотека автоматически отслеживает события, связанные с несколькими точками касания экрана. Однако для правильной работы жестов нужно правильно настроить камеру и события.

Для этого следует использовать камеру типа ArcRotateCamera, которая оптимизирована для взаимодействия с жестами и отслеживания точек касания:

const camera = new BABYLON.ArcRotateCamera("camera1", Math.PI / 2, Math.PI / 2, 10, BABYLON.Vector3.Zero(), scene);
camera.attachControl(canvas, true);

При создании камеры нужно обязательно вызвать метод attachControl, который будет связывать камеру с элементом HTML (например, с элементом canvas). Это позволяет Babylon.js автоматически отслеживать все жесты, происходящие на экране.

Основные мультитач-жесты

Масштабирование (Pinch)

Масштабирование — это жест, при котором два пальца перемещаются по экрану, увеличивая или уменьшая размер сцены. Babylon.js использует событие onPinchObservable, которое позволяет отслеживать изменения расстояния между двумя точками касания:

scene.onPointerObservable.add((pointerInfo) => {
    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERPICK) {
        const pinchDistance = pointerInfo.event.touches[0].clientX - pointerInfo.event.touches[1].clientX;
        // обработка масштаба
    }
}, BABYLON.PointerEventTypes.POINTERPICK);

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

Вращение (Rotate)

Вращение сцены также основывается на многоточечных жестах, где два пальца проводят по экрану, и сцена вращается вокруг своей оси. Для отслеживания вращения Babylon.js использует событие onRotateObservable:

scene.onPointerObservable.add((pointerInfo) => {
    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERDRAG) {
        // обрабатываем вращение сцены
    }
}, BABYLON.PointerEventTypes.POINTERDRAG);

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

Сдвиг (Pan)

Сдвиг сцены, или панорамирование, позволяет перемещать объект или камеру по экрану. Этот жест также поддерживается с использованием мультитач-технологии, где перемещение пальцев вдоль экрана приводит к изменению позиции объекта в 3D-пространстве. Для этого применяется событие onPointerMove:

scene.onPointerObservable.add((pointerInfo) => {
    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERMOVE) {
        const deltaX = pointerInfo.event.movementX;
        const deltaY = pointerInfo.event.movementY;
        // обрабатываем сдвиг сцены
    }
}, BABYLON.PointerEventTypes.POINTERMOVE);

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

Совмещение жестов

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

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

scene.onPointerObservable.add((pointerInfo) => {
    if (pointerInfo.type === BABYLON.PointerEventTypes.POINTERMOVE) {
        // обрабатываем панорамирование или вращение, в зависимости от контекста
        if (isScaling) {
            // обработка масштабирования
        } else if (isRotating) {
            // обработка вращения
        }
    }
}, BABYLON.PointerEventTypes.POINTERMOVE);

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

Использование жестов с объектами

Одним из примеров реализации мультитач-жестов является создание системы управления объектами в 3D-пространстве. Например, можно реализовать систему, где объекты сцены перемещаются, масштабируются и вращаются в зависимости от действий пользователя. Для этого следует использовать комбинированные жесты:

  • Масштабирование объектов: изменяется размер объекта на основе расстояния между двумя точками касания.
  • Вращение объектов: объект вращается на основе угла между двумя пальцами.
  • Перемещение объектов: объект перемещается в 3D-пространстве в зависимости от сдвига пальцев.

Пример реализации:

let isScaling = false;
let isRotating = false;

scene.onPointerObservable.add((pointerInfo) => {
    switch (pointerInfo.type) {
        case BABYLON.PointerEventTypes.POINTERMOVE:
            if (isScaling) {
                // обработка масштабирования объекта
            } else if (isRotating) {
                // обработка вращения объекта
            }
            break;
        case BABYLON.PointerEventTypes.POINTERDOWN:
            // проверка, какой жест начался
            break;
        case BABYLON.PointerEventTypes.POINTERUP:
            // завершение жеста
            break;
    }
});

Дополнительные функции и настройки

Кроме стандартных жестов, Babylon.js предоставляет дополнительные возможности для работы с мультитач-жестами. К примеру, можно настроить чувствительность жестов, определить минимальное или максимальное расстояние для активации жеста, а также использовать различные типы камер для разных сценариев использования.

Для более точной настройки жестов можно использовать параметры камеры, такие как:

  • angularSensibility: чувствительность камеры к вращению.
  • wheelPrecision: чувствительность колеса мыши или жестов увеличения/уменьшения.

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

Заключение

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

Оглавление