处理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("It was clicked!"),
    };

    start() {
        /* 获取"cursor-target"组件的引用 */
        const target = this.object.getComponent('cursor-target');

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

    onClick() {
        /* 打印在编辑器中配置的消息 */
        console.log(this.message);
    }
}

一旦添加了该组件，您就可以在浏览器中运行项目，当对象被点击时，应该会在浏览器控制台中显示一条消息。