cursor | A-FRAME

カーソルコンポーネントは、インタラクションを受け付けるためのホバーとクリックの状態をレイキャスターコンポーネントの上に提供します。カーソルコンポーネントは、注視ベースのインタラクションとコントローラベースのインタラクションの両方に使用できますが、利用状況に応じて外観を設定する必要があります。プリミティブは注視型カーソルのための目盛りとなる外観を提供し、レーザーコントロールコンポーネントはすべてのコントローラのためのカーソルを設定します。

カーソルコンポーネントはイベントをリッスンし、マウスダウン(mousedown)、マウスアップ(mouseup)、マウスエンター(mouseenter)、マウスリーブ(mouseleave)、およびクリックclickイベントを提供するために、何がホバーされているか、押されているかの状態を保持します。ここでは、伝統的な Web 開発を模倣してマウスという名前を使用しています。内部では、カーソルコンポーネントは raycaster-intersection と raycaster-intersection-cleared イベントを使用し、最も近い可視交差エンティティを捕捉しています。

デフォルトでは、カーソルは注視ベースのモードで使用するように設定されており、マウスまたはタッチによるユーザー入力を登録します。ダウンイベント(downEvents) とアップイベント(upEvents) プロパティを指定することで、カーソルはコントローラと連動するようになります。例えば、laser-controls コンポーネントは、ほとんどのコントローラで動作するように、これらのプロパティを自動的に設定します。

カーソルに形状や外観を与えるには、ジオメトリとマテリアルコンポーネントのいずれかを適用するか、レイキャスターコンポーネントのshowLineプロパティを使用してラインコンポーネントで線を描画する必要があります。

# 例

例えば、画面の中央に固定されたリング状のカーソルを作成することができます。カーソルを画面に固定し、どこを見てもカーソルが見えるようにするには、アクティブなカメラエンティティの子として配置します。-Z軸上に配置することで、カメラの手前に引き寄せます。カーソルがボックスをクリックすると、クリックイベントを聞くことができます。

<a-entity camera look-controls>
  <a-entity cursor="fuse: true; fuseTimeout: 500"
            position="0 0 -1"
            geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
            material="color: black; shader: flat">
  </a-entity>
</a-entity>

<a-entity id="box" cursor-listener geometry="primitive: box" material="color: blue"></a-entity>

// Component to change to a sequential color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var lastIndex = -1;
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      lastIndex = (lastIndex + 1) % COLORS.length;
      this.setAttribute('material', 'color', COLORS[lastIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

# Properties

Property	概要	デフォルト値
downEvents	mousedown をトリガーするためにリッスンする、エンティティ上の追加イベントの配列（例：`vive-controls` の `triggerdown`）。	[]
fuse	カーソルがフューズベースであるかどうか。	デスクトップでは`false`、モバイルでは `true`
fuseTimeout	ヒューズベースのクリックイベントをトリガーするまでの待ち時間（ミリ秒単位）。	1500
mouseCursorStylesEnabled	エンティティにカーソルを合わせたときに、ポインタカーソルを `rayOrigin: mouse` モードで表示するかどうか

                                                          | true                             |

カーソルコンポーネントをよりカスタマイズするには、カーソルに依存したコンポーネント、レイキャスターコンポーネントthe raycaster componentを編集します。

# Events

Event	概要
click	現在交差しているエンティティがクリックされた場合、カーソルと交差しているエンティティの両方に発せられる（マウスによるものかヒューズによるものかを問わず）。
fusing	ヒューズカーソルがカウントダウンを開始したとき、カーソルと交差するエンティティの両方に発せられる。
mousedown	canvas要素上でマウスダウンしたときに、カーソルと交差しているエンティティ（もしあれば）の両方に対して発せられる。
mouseenter	カーソルがエンティティに交差したときに、カーソルと交差したエンティティの両方で放出される（存在する場合）。
mouseleave	カーソルが以前に交差したエンティティに交差しなくなったとき、カーソルと交差したエンティティ（もしあれば）の両方で放出される。
mouseup	キャンバス要素へのマウスアップ時に、カーソルと交差しているエンティティ（もしあれば）の両方に対して発せられる。

# データの交差

関連するイベントはイベントの詳細のintersectionに含まれます。これにはintersectionに関する特定のデータ、{distance, point, face, faceIndex, indices, object}を含みます。

this.el.addEventListener('click', function (evt) {
  console.log(evt.detail.intersection.point);
});

# ステート

カーソルは、特定のイベント時にカーソルエンティティに状態を追加します。

State	概要
cursor-fusing	カーソルが他のエンティティにフュージョンしているときに追加される。
cursor-hovering	カーソルが他のエンティティにホバーリングしているときに追加される

カーソルは、特定のイベント時に交差するエンティティにステートを追加します。

State	概要
cursor-hovered	カーソルが交差するエンティティにカーソルを合わせたときに追加されます。

# レイキャスターコンポーネントを通じてカーソルを設定する

カーソルはレイキャスターコンポーネントの上に構築され、レイキャスターコンポーネントに依存します。もし、カーソルのレイキャスティング部分をカスタマイズしたい場合は、レイキャスターコンポーネントのプロパティを変更することによって行うことができます。例えば、最大距離を設定し、交差点をあまり頻繁にチェックせず、どのオブジェクトがクリック可能かを設定したいとします。

<a-entity cursor raycaster="far: 20; interval: 1000; objects: .clickable"></a-entity>

# フューズベースドカーソル

注視型カーソルとも呼ばれる。カーソルをフューズベースに設定すると、ユーザーがあるエンティティを一定時間見つめると、カーソルがクリックのトリガーになります。ユーザーの頭にレーザーが装着され、レーザーがシーンに伸びていると想像してください。ユーザーがエンティティを十分な時間（つまり、fuseTimeout）見つめると、カーソルがクリックされます。

VRにおけるフューズベースのインタラクションの利点は、ヘッドセット以外の余分な入力デバイスを必要としないことです。ヒューズベースのカーソルは、主にGoogle Cardboardアプリケーションを対象としています。ヒューズベースのインタラクションの欠点は、ユーザーが頭をたくさん回転させる必要があることです。

# 視覚的なフィードバックを追加する

カーソルのクリックやフューズのタイミングを示す視覚的なフィードバックを追加するには、アニメーションコンポーネントを使用します。カーソルがエンティティに交差すると、イベントが発生し、アニメーションシステムはbegin属性でイベントを拾います。

<a-entity
  animation__click="property: scale; startEvents: click; easing: easeInCubic; dur: 150; from: 0.1 0.1 0.1; to: 1 1 1"
  animation__fusing="property: scale; startEvents: fusing; easing: easeInCubic; dur: 1500; from: 1 1 1; to: 0.1 0.1 0.1"
  animation__mouseleave="property: scale; startEvents: mouseleave; easing: easeInCubic; dur: 500; to: 1 1 1"
  cursor="fuse: true;"
  material="color: black; shader: flat"
  position="0 0 -3"
  geometry="primitive: ring"></a-entity>

ビジュアルフィードバック付きのカーソルの例で遊ぶには、CodePenのCursor with Visual Feedback (opens new window)の例をご覧ください。

← camera daydream-controls →