ActionManager: действия на мешах

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

Основы работы с ActionManager

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

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

Пример создания ActionManager для меша:

const mesh = BABYLON.MeshBuilder.CreateBox("box", { size: 2 }, scene);
mesh.actionManager = new BABYLON.ActionManager(scene);

Теперь для объекта mesh можно добавить различные действия, такие как обработка событий мыши, клавиш или других типов взаимодействий.

Типы действий в ActionManager

ActionManager поддерживает множество различных типов действий, включая события, такие как onPick, onPointerOver, onPointerOut, onPickDown, а также анимации и переходы.

События взаимодействия
  1. onPick — срабатывает, когда пользователь кликает на объект.
  2. onPointerOver — активируется, когда указатель мыши находится над объектом.
  3. onPointerOut — срабатывает, когда указатель мыши покидает область объекта.
  4. onPickDown — срабатывает, когда происходит нажатие на объект.

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

Пример добавления события для изменения цвета объекта при клике:

mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnPickTrigger, 
    function() {
        mesh.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Изменить цвет на красный
    }
));

В этом примере при клике на объект его цвет изменяется на красный.

Событие onPointerOver и onPointerOut

Для того чтобы визуально реагировать на наведение мыши, можно использовать события onPointerOver и onPointerOut. Они полезны для создания эффектов наведения, таких как подсветка объектов.

Пример подсветки объекта при наведении мыши:

mesh.actionManager.registerAction(new BABYLON.SetValueAction(
    BABYLON.ActionManager.OnPointerOverTrigger, 
    mesh.material, "diffuseColor", new BABYLON.Color3(0, 1, 0) // Зеленый цвет при наведении
));

mesh.actionManager.registerAction(new BABYLON.SetValueAction(
    BABYLON.ActionManager.OnPointerOutTrigger, 
    mesh.material, "diffuseColor", new BABYLON.Color3(1, 1, 1) // Возврат к белому цвету
));

Анимации и переходы

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

Пример анимации перемещения объекта:

const moveAnimation = new BABYLON.Animation("move", "position.x", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);

const keys = [
    { frame: 0, value: mesh.position.x },
    { frame: 30, value: mesh.position.x + 5 }
];

moveAnimation.setKeys(keys);
mesh.actionManager.registerAction(new BABYLON.PlayAnimationAction(
    BABYLON.ActionManager.OnPickTrigger, 
    mesh, 
    moveAnimation
));

Здесь создается анимация перемещения объекта по оси X. При клике на объект анимация будет воспроизводиться.

Использование условий и сложных действий

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

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

mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnPickTrigger, 
    function() {
        if (mesh.position.x > 0) {
            mesh.material.diffuseColor = new BABYLON.Color3(0, 0, 1); // Синий цвет, если X > 0
        } else {
            mesh.material.diffuseColor = new BABYLON.Color3(1, 1, 0); // Желтый цвет, если X <= 0
        }
    }
));

В этом примере цвет объекта меняется в зависимости от его позиции.

Работа с клавишами

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

Пример обработки нажатия клавиши для изменения цвета:

scene.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnKeyDownTrigger, 
    function(evt) {
        if (evt.sourceEvent.key === "r") {
            mesh.material.diffuseColor = new BABYLON.Color3(1, 0, 0); // Красный цвет при нажатии клавиши 'r'
        }
    }
));

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

Сложные последовательности действий

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

Пример комбинирования нескольких действий:

mesh.actionManager.registerAction(new BABYLON.ExecuteCodeAction(
    BABYLON.ActionManager.OnPickTrigger, 
    function() {
        mesh.material.diffuseColor = new BABYLON.Color3(0, 0, 1); // Синий цвет
        const animation = new BABYLON.Animation("rotate", "rotation.y", 30, BABYLON.Animation.ANIMATIONTYPE_FLOAT, BABYLON.Animation.ANIMATIONLOOPMODE_CYCLE);
        animation.setKeys([
            { frame: 0, value: mesh.rotation.y },
            { frame: 100, value: mesh.rotation.y + Math.PI }
        ]);
        mesh.animations.push(animation);
        scene.beginAnimation(mesh, 0, 100, false); // Запуск анимации вращения
    }
));

Здесь при клике на объект его цвет меняется на синий, а затем начинается анимация вращения.

Оптимизация работы с ActionManager

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

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

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

Оглавление