Обработка кликов 3D курсором

Взаимодействие с 3D курсором является основой для создания плавающих меню, переходов к другим сценам и иного взаимодействия с 3D средой простым способом.

Этот учебник показывает, как обрабатывать клики 3D курсором. Мы пропускаем настройку 3D курсора, поскольку это уже настроено для вас в шаблоне проекта “VR” при создании нового проекта.

Компоненты 

Компоненты, используемые в этом наборе, — это cursor, cursor-target и collision.

Мы также добавим пользовательский компонент log-on-click для специфического поведения, которого мы хотим достичь при клике на объект.

Настройка в редакторе 

В редакторе прикрепите два компонента к объекту, который вы хотите сделать кликабельным: collision и cursor-target.

collision указывает область, которую можно сделать кликабельной; после добавления вы увидите зеленый контур, указывающий форму, на которую можно кликнуть. Вы можете изменить форму столкновения компонента, чтобы она максимально соответствовала вашему объекту. (На данный момент треугольные сетки не поддерживаются.)

cursor-target позволяет добавлять JavaScript код для различных событий курсора.

Пользовательское поведение 

Хотя эти компоненты позволяют нам задавать пользовательское поведение, сами по себе, они меняют только визуальное поведение курсора: теперь объект курсора будет появляться при наведении на кликабельный объект.

Чтобы добавить поведение при клике, мы добавляем пользовательский JavaScript компонент:

import {Component, Property} from '@wonderlandengine/api';

extends class LogOnClick extends Component {
    static TypeName = 'log-on-click';

    static Properties = {
        message: Property.string("Это было нажато!"),
    };

    start() {
        /* Получите ссылку на компонент "cursor-target" */
        const target = this.object.getComponent('cursor-target');

        target.addClickFunction(this.onClick.bind(this));
    }

    onClick() {
        /* Выведите сообщение, настроенное в редакторе */
        console.log(this.message);
    }
}

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