aframe
カーソル

前書き

構文

• <a-entity cursor = ""> </ a-cursor>
• <a-cursor> </ a-cursor>

パラメーター

備考

デフォルトのカーソル

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

<a-entity camera>
  <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 random color on click.
AFRAME.registerComponent('cursor-listener', {
  init: function () {
    var COLORS = ['red', 'green', 'blue'];
    this.el.addEventListener('click', function (evt) {
      var randomIndex = Math.floor(Math.random() * COLORS.length);
      this.setAttribute('material', 'color', COLORS[randomIndex]);
      console.log('I was clicked at: ', evt.detail.intersection.point);
    });
  }
});

カーソルコンポーネントとの視線に基づく相互作用

まず、凝視ベースのやりとりについて説明します。凝視ベースのインタラクションは、頭を回転させたり、オブジェクトを見たり、オブジェクトと対話することに依存しています。このタイプの相互作用は、コントローラのないヘッドセットのためのものです。回転専用コントローラー（Daydream、GearVR）を使用しても、相互作用はまだ似ています。 A-Frameはデフォルトでマウスドラッグコントロールを提供しているので、デスクトップ上で視線ベースのソートを使用して、カメラの回転をドラッグしてインタラクションをプレビューすることができます。

凝視ベースのインタラクションを追加するには、コンポーネントを追加または実装する必要があります。 A-Frameには、カメラに接続されている場合、凝視ベースのインタラクションを提供するカーソルコンポーネントが付属しています。

1. エンティティを明示的に定義する以前は、Aフレームがデフォルトのカメラを提供していました。
2. a-cursorエンティティをカメラエンティティの下の子要素として追加a-cursor 。
3. 必要に応じて、カーソルで使用するレイキャスターを設定します。

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
    <!-- Or <a-entity cursor></a-entity> -->
  </a-camera>
</a-scene>

a-cursorプリミティブ

カーソルプリミティブは、ハンドコントローラを持たないデバイス上のシーンとのクリックや基本的なインタラクティビティを可能にするレチクルです。デフォルトの外観はリングジオメトリです。カーソルは、通常、カメラの子として配置されます。

<a-scene>
  <a-camera>
    <a-cursor></a-cursor>
  </a-camera>
  <a-box></a-box>
</a-scene>

ヒューズベースのカーソル

凝視ベースのカーソルとも呼ばれます。カーソルをヒューズベースに設定すると、ユーザーが設定された時間だけエンティティを注視すると、カーソルがクリックをトリガーします。ユーザーの頭にストラップされたレーザーを想像してみましょう。ユーザーが十分長い時間エンティティを見た場合（つまり、fuseTimeout）、カーソルはクリックをトリガーします。

VRのヒューズベースの相互作用の利点は、ヘッドセット以外の余分な入力デバイスを必要としないことです。ヒューズベースのカーソルは、主にGoogle Cardboardアプリケーション用です。ヒューズベースの相互作用の欠点は、ユーザが頭を大きく回す必要があることです。

Raycasterコンポーネントによるカーソルの構成

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

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

ビジュアルフィードバックの追加

カーソルに視覚的なフィードバックを加えて、カーソルがクリックまたは融合しているときを表示するには、アニメーションシステムを使用できます。カーソルがエンティティと交差すると、イベントが発生し、アニメーションシステムはbegin属性でイベントを取得します。

<a-entity cursor="fuse: true; fuseTimeout: 500"
          position="0 0 -1"
          geometry="primitive: ring"
          material="color: black; shader: flat">
  <a-animation begin="click" easing="ease-in" attribute="scale"
               fill="backwards" from="0.1 0.1 0.1" to="1 1 1"></a-animation>
  <a-animation begin="cursor-fusing" easing="ease-in" attribute="scale"
               fill="forwards" from="1 1 1" to="0.1 0.1 0.1"></a-animation>
</a-entity>

マウスカーソル

注：この例では、外部npmパッケージを追加する必要があります。

コンピュータのマウスカーソルを使用する場合は、 aframe-mouse-cursor-componentを追加する必要がありaframe-mouse-cursor-component 。このコードを使用してスクリプトを含める必要がある場合は、次のようにします。

import 'aframe';
import 'aframe-mouse-cursor-component';

// or this 

require('aframe');
require('aframe-mouse-cursor-component');

また、カメラにmouse-cursorコンポーネントを追加する必要があります。

<a-scene>
  <a-entity camera look-controls mouse-cursor>
</a-scene>