3Dカーソルクリックの処理

3Dカーソルとのインタラクションは、浮遊メニューを構築したり、他のシーンにリンクしたり、3D環境とシンプルにインタラクションするための基本的な構成要素です。

このチュートリアルでは、3Dカーソルのクリックを処理する方法を紹介します。3Dカーソルのセットアップについては説明を省略しますが、新しいプロジェクトを作成する際の「VR」プロジェクトテンプレートで既にセットアップされています。

コンポーネント 

このセットアップで使用されるコンポーネントは、cursor、cursor-target、および collision です。

オブジェクトがクリックされたときに特定の動作を実行するため、カスタムコンポーネント log-on-click を追加します。

エディターでのセットアップ 

クリック可能にしたいオブジェクトに、エディターで2つのコンポーネントを追加します：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);
    }
}

このコンポーネントを追加したら、ブラウザでプロジェクトを実行し、オブジェクトをクリックすると、ブラウザコンソールにメッセージが表示されるはずです。