インタラクション & コントローラー

There is no one true way for adding interactions due to variety of platforms, devices, input methods that A-Frame can support. On top of that, VR interaction is open-ended. Unlike the 2D Web where we only have to worry about mouse and touch input, and unlike Cardboard where we only have to worry about one button, we can do anything in VR: grab, throw, rub, flip, poke, stretch, press, etc. Going further, mixed reality, trackers, and custom controllers provide even more creativity in interaction!

What we can do in this section is go over existing components for common interactions. And we can show how these input-based and interaction-based components are built in order to give us the knowledge to build our own interactions. In a sense, learn how to fish rather than being given a fish.

A-Frameが対応するプラットフォーム、デバイス、入力方式は多岐にわたるため、インタラクションを追加する方法はひとつではありません。その上、VRインタラクションはオープンエンドです。マウスやタッチ入力のみに気を使えばよいウェブや、1つのボタンしか気にする必要のない紙芝居の世界とは異なり、 VRではなんでもできます。つかむ、投げる、こする、ひっくり返す、突く、伸ばす、押すなどです。さらに進んで、MixedReality、トラッカー、カスタムコントローラーを使えば、インタラクションにさらに創造性を発揮することができます。

このセクションでできることは、普遍的なインタラクションのための既存のコンポーネントを確認することです。そして、これらのインプットベースおよびインタラクションベースのコンポーネントがどのように構築されているかを知ることを通じて、私たち自身のインタラクションを構築するための知識を提供します。ある意味、魚を与えられるのではなく、魚の釣り方を学ぶのです。

# Events

2D Webでは、入力とインタラクションはブラウザイベント（例：クリック、マウス入力、マウスクリック解放、タッチの開始、タッチの終了）を通じて処理されます。インプットベースのイベントが発生するたびに、ブラウザはイベントを発行し、Element.addEventListener (opens new window)でそれをリッスンして処理することができます。

// `click` event emitted by browser on mouse click.
document.querySelector('p').addEventListener('click', function (evt) {
  console.log('This 2D element was clicked!');
});

2Dウェブと同様、A-Frameは、インタラクティブ性とダイナミズムを実現するために、イベントとイベントリスナーに依存しています。しかしながら、A-FrameはJavaScriptのフレームワークであり、すべてがWebGLで行われるため、 A-Frameのイベントは合成カスタムイベント (opens new window) であり、どのコンポーネントがどのイベントを記述しても発信することが可能です。

// `collide` event emitted by a component such as some collider or physics component.
document.querySelector('a-entity').addEventListener('collide', function (evt) {
  console.log('This A-Frame entity collided with another entity!');
});

よくある誤解として、A-Frameのエンティティにclickイベントのリスナーを追加すれば、マウスで直接エンティティをクリックすることで動作すると思われているようです。 WebGLでは、このようなclickイベントを提供する入力とインタラクションを提供する必要があります。例えば、A-Frameのcursorコンポーネントは、レイキャスターを使って人工的にclickイベントを作ります。

また、別の例として、Mayo Tobita氏のマウスカーソルコンポーネント (opens new window)は、レイキャスターを使ってエンティティを直接クリックした時に人工的にイベントを作成します。

# カーソルコンポーネントを使った視線ベースのインタラクション

GlitchでRemixする (opens new window).

まず、視線を使ったインタラクションについて説明します。視線ベースのインタラクションは、頭を回転させ、オブジェクトを見てインタラクションを行うことに依存します。このタイプのインタラクションは、ハンドコントローラーのないヘッドセット向けです。回転センサーのみのコントローラー（Daydream、GearVR、Oculus Go）であっても、インタラクションは似ています。 A-Frameはデフォルトでマウスドラッグのコントロールを提供しているので、視線ベースはデスクトップでカメラの回転をドラッグすることでインタラクションをプレビューするために使うことができます。

視線型インタラクションを追加するには、コンポーネントを追加または実装する必要があります。A-Frameにはカーソルコンポーネントが付属しており、カメラに付与することで視線ベースのインタラクションができます。

<a-camera>エンティティを明示的に定義します。以前は、A-Frameがデフォルトのカメラを提供していました。
カメラ・エンティティの下に子要素として<a-cursor>エンティティを追加します。
オプションで、カーソルによって使用されるレイキャスターを設定します。

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

# event-set コンポーネントでイベントを処理する

GlitchでREmixする (opens new window).

では、カーソルコンポーネントが提供するイベントを処理してみましょう。カーソルコンポーネントは、click、mouseenter、mouseleave、mousedown、mouseup、fusingといった合成イベントを発行します。ブラウザのネイティブイベントと同じような名前を付けて、初めての人にもわかりやすくしていますが、合成イベントであることに注意してください。

イベントを聞いて、それに応答してプロパティを設定するような基本的なイベントハンドラには、event-set コンポーネント (opens new window)を使用することができます。 event-set コンポーネントは、基本的なイベントハンドラを宣言的にします。イベントセットコンポーネントのAPIは以下のようになります。

<a-entity event-set__${id}="_event: ${eventName}; ${someProperty}: ${toValue}">

__${id}の部分によって、同じエンティティに複数のイベントセットコンポーネントを付与することができます。インスタンスが処理するイベントを${eventName}で提供します。そして、そのイベントが発生したときに設定したいプロパティ名と値をエンティティに渡します。

例えば、エンティティにカーソルを置いたり、見たりしたときに、そのエンティティが見えるようにすることができます。カーソルコンポーネントは、mouseenterイベントを提供します。

<a-entity event-set__makevisible="_event: mouseenter; visible: true">

ホバーでボックスの色を変え、ホバーが外れた時にもとに戻すには

<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script2 src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
<body>
  <a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"
           event-set__enter="_event: mouseenter; color: #8FF7FF"
           event-set__leave="_event: mouseleave; color: #4CC3D9"></a-box>

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

イベントセットコンポーネントは、_target: ${selector}を使用して他のエンティティをターゲットにすることもできます。あるエンティティにホバーした時に、テキストラベルを表示したい場合

<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script2 src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
<body>
  <a-scene>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"
                event-set__enter="_event: mouseenter; _target: #cylinderText; visible: true"
                event-set__leave="_event: mouseleave; _target: #cylinderText; visible: false">
      <a-text id="cylinderText" value="This is a cylinder" align="center" color="#FFF" visible="false" position="0 -0.55 0.55"
              geometry="primitive: plane; width: 1.75" material="color: #333"></a-text>
    </a-cylinder>

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

イベントセットコンポーネントは、A-Frameコンポーネントのドット構文を用いて複数のプロパティを持つコンポーネントに対しても機能します。（例：${componentName}.${propertyName}）

<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script2 src="https://unpkg.com/aframe-event-set-component@3.0.3/dist/aframe-event-set-component.min.js"></script>
<body>
  <a-scene>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"
             event-set__down="_event: mousedown; material.wireframe: true"
             event-set__up="_event: mouseup; material.wireframe: false"
             event-set__leave="_event: mouseleave; material.wireframe: false"></a-plane>

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

# JavaScriptを使ってイベントを処理する

GlitchでRemixする (opens new window)

イベントセットコンポーネントは、基本的な設定操作に適していますが、JavaScriptでイベントを処理する方法を知っておくことは重要です。イベントに応じて、より複雑な操作（APIの呼び出し、データの保存、アプリケーションの状態への影響など）を行いたいと思うことが出てきます。そのような場合には、JavaScriptを使う必要がありますが、A-Frameでは、そのコードをA-Frameのコンポーネント内に配置するよう定めています。

イベントセットコンポーネントがどのような働きをするのか、JavaScriptを使って、ホバーしたときとホバーから離れたときにボックスの色を変えるようにしてみましょう。

<script2 src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script>
  AFRAME.registerComponent('change-color-on-hover', {
    schema: {
      color: {default: 'red'}
    },

    init: function () {
      var data = this.data;
      var el = this.el;  // <a-box>
      var defaultColor = el.getAttribute('material').color;

      el.addEventListener('mouseenter', function () {
        el.setAttribute('color', data.color);
      });

      el.addEventListener('mouseleave', function () {
        el.setAttribute('color', defaultColor);
      });
    }
  });
</script>
<body>
  <a-scene>
    <a-box color="#EF2D5E" position="0 1 -4" change-color-on-hover="color: blue"></a-box>

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

ここではシンプルな .setAttribute を使用していますが、JavaScriptやthree.jsそしてWeb API に完全にアクセスできるため、技術的にはイベントに応答してこのコンポーネント内で何でも行うことができます。

この後、VRコントローラのインタラクティブ機能の説明と実装に移りますが、イベントとイベントリスナーのコンセプトはそのまま適用されます。

# VR コントローラー

VRアプリケーションに没入してもらうためには、コントローラーが不可欠です。 VRのポテンシャルは、それら、すなわち6自由度（6DoF）を提供するコントローラーなしでは満たされません。コントローラーを使えば、人は手を伸ばしてシーンを見回したり、オブジェクトとインタラクションしたりすることができます。

A-Frameは、Gamepad Web API (opens new window)を通じて、それぞれのWebVRブラウザでサポートされている、あらゆる分野のコントローラ用のコンポーネントを提供しています。Vive、Oculus Touch、Daydream、GearVR、Oculus Goの各コントローラのためのコンポーネントがあります。

ゲームパッドオブジェクトを検査したり、ゲームパッドIDを取得したりするには、ブラウザコンソールで navigator.getGamepads() を呼び出すことができます。これは、接続されているすべてのコントローラを含む GamepadList 配列を返します。

高度なアプリケーションでは、コントローラを構築し、アプリケーションに合わせて調整します（カスタム3Dモデル、アニメーション、マッピング、ジェスチャーなど）。例えば、中世の騎士が金属のガントレットを持っていたり、ロボットがレーザーを撃ったり手首に情報を表示される腕を持っていたりするようなものです。

A-Frameが提供するコントローラコンポーネントは、主に、デフォルト、スターターコンポーネントとして機能します。そして、よりカスタマイズされたコントローラコンポーネントを派生させるためのベースとして機能します。

# tracked-controls Component

The tracked-controls component is A-Frame's base controller component that provides the foundation for all of A-Frame's controller components. The tracked-controls component:

Grabs a Gamepad object from the Gamepad API given an ID or prefix.
Applies pose (position and orientation) from the Gamepad API to read controller motion.
Looks for changes in the Gamepad object's button values to provide events when buttons are pressed or touched and when axis and touchpads are changed (i.e., axischanged, buttonchanged, buttondown, buttonup, touchstart, touchend).

トラックコントロールコンポーネントは、A-Frameのベースとなるコントローラコンポーネントで、A-Frameの全てのコントローラコンポーネントの土台を提供します。tracked-controlsコンポーネントは。

IDまたはプレフィックスを指定し、Gamepad APIからGamepadオブジェクトを取得します。
Gamepad APIからポーズ（位置と向き）を適用し、コントローラーの動きを読み取ります。
Gamepad オブジェクトのボタン値の変化を探し、ボタンが押されたり、タッチされたり、軸やタッチパッドが変更されたときにイベントを提供します (例: axischanged, buttonchanged, buttondown, buttonup, touchstart, touchend)。

A-Frameの全てのコントローラコンポーネントは、以下の方法でtracked-controlsコンポーネントの上に構築されます。

適切なゲームパッドID（例：Oculus Touch）を持つエンティティに対してtracked-controlsコンポーネントを設定します。　例えば、vive コントロールコンポーネントは el.setAttribute('tracked-controls', {idPrefix: 'OpenVR'}) とします。tracked-controls はその後、適切な Gamepad オブジェクトに接続し、エンティティに対して姿勢とイベントを提供することになります。
tracked-controlsが提供するイベントを抽象化します。 tracked-controlsのイベントは低レベルなので、そのイベントだけではどのボタンが押されたかを知ることは難しく、事前にボタンのマッピングを知る必要があります。コントローラコンポーネントは、それぞれのコントローラのマッピングを事前に知ることができ、triggerdown や xbuttonup のような、よりセマンティックなイベントを提供することができます。
モデルを提供します。トラックドコントロールだけでは、いかなる外観をも提供することはできません。コントローラコンポーネントは、ボタンが押されたり、タッチされたときに、視覚的なフィードバックやジェスチャー、アニメーションを表示するモデルを提供することができます。

以下のコントローラコンポーネントは、ゲームパッドAPIでコントローラが見つかり、接続されていることが確認された場合のみ起動されます。

# 3DoFコントローラーを追加する (daydream、 gearvr、 oculus-go)

3DoFのコントローラは、回転方向のトラッキングに限定されます。位置トラッキング機能がないため、手を伸ばしたり、前後や上下に動かしたりすることができません。

3自由度しかないコントローラは、腕のない手と手首を持つようなものです。VRのための自由度についてもっと読む (opens new window).

3DoFコントローラのコンポーネントは、回転トラッキング、現実のハードウェアにマッチしたデフォルトモデル、ボタンマッピングを抽象化するためのイベントを提供します。Google Daydream、Samsung GearVR、Oculus Go のコントローラは 3DoF を備えており、いずれも片手用のコントローラ 1 つのみをサポートしています。

Google Daydream用のコントローラを追加するには、daydream-controlsコンポーネントを使用します。そして、Daydreamスマートフォン上のAndroid用Chromeで試してみてください。

<a-entity daydream-controls></a-entity>

Samsung GearVR用のコントローラーを追加するには、gearvr-controlsコンポーネントを使用します。その後、GearVRを搭載したスマートフォンでOculus CarmelまたはSamsung Internetで試してみてください。

<a-entity gearvr-controls></a-entity>

Oculus Go用のコントローラーを追加するには、oculus-go-controlsコンポーネントを使用します。その後、Oculus GoスタンドアロンヘッドセットでOculus BrowserまたはSamsung Internetで試してみてください。

<a-entity oculus-go-controls></a-entity>

# 6DoFコントローラーを追加する (viveコントロール、 oculus-touchコントロール)

6自由度（6DoF）のコントローラーは、回転と位置の両方のトラッキングが可能です。向きに制約のある3DoFのコントローラーとは異なり、6DoFコントローラーは3次元空間内を自由に動くことができます。 6DoFでは、前方や背中に手を伸ばしたり、手を体全体に動かしたり、顔の近くに持っていったりすることが可能です。 6DoFを持つことは、両手と両腕がある現実と同じです。 6DoFは、ヘッドセットや追加のトラッカー（例：足、小道具）にも適用されます。6DoFを持つことは、真に没入感のあるVR体験を提供するための最低条件なのです。

6DoFコントローラ・コンポーネントは、完全なトラッキング、現実のハードウェアにマッチしたデフォルト・モデル、ボタン・マッピングを抽象化するためのイベントを提供します。HTC ViveとOculus Rift with Touchは、6DoFと両手用のコントローラを提供します。 HTC Viveは、現実世界のオブジェクトをVRに追加してトラッキングするためのトラッカーも提供しています。

HTC Vive用のコントローラを追加するには、両手用のvive-controlsコンポーネントを使用します。その後、WebVR 対応のデスクトップブラウザで試してみてください。

vive用のコントローラを追加するには、両手用のviveコンポーネントを使用します。その後、WebVR 対応のデスクトップブラウザ (opens new window)で試してみてください。

<a-entity vive-controls="hand: left"></a-entity>
<a-entity vive-controls="hand: right"></a-entity>

Oculus Touch用のコントローラを追加するには、両手用のoculus-touch-controlsコンポーネントを使用します。その後、WebVR 対応のデスクトップブラウザ (opens new window)で試してみてください。

<a-entity oculus-touch-controls="hand: left"></a-entity>
<a-entity oculus-touch-controls="hand: right"></a-entity>

# 複数のタイプのコントローラーに対応する

Webには、複数のプラットフォームに対応できるというメリットがあります。しかし、3DoFプラットフォームと6DoFプラットフォームではインタラクションが異なり、異なるユーザーエクスペリエンス処理が必要なため、 VRではマルチプラットフォームのサポートが何を意味するかは明確ではありません。 Web上のVRにとって「レスポンシブ」が何を意味するかは、アプリケーション次第でしょう。いくつかの異なる方法を提示できますが、本当に万能なものはありません。

# ハンドコントロールズコンポーネント

A-Frameでは、hand-controlsコンポーネントを介して、複数の種類の6DoFコントローラ（Vive、Oculus Touch）に対応するための実装方法を提供しています。ハンドコントロールコンポーネントは、オブジェクトをつかむなどのルームスケールインタラクション向けなので、主に6DoFコントローラ向けです。ハンドコントロールコンポーネントは、以下の方法でViveとOculus Touchの両方のコントローラの上で動作します。

vive-controls と oculus-touch-controls コンポーネントの両方を設定します。
コントローラモデルをシンプルなハンドモデルでオーバーライドする。
Vive 固有のイベントと Oculus Touch 固有のイベントをハンドイベントとジェスチャーにマッピングする (例: gripdown と triggerdown を thumbupに)

ハンドコントロールコンポーネントを追加するには

<a-entity hand-controls="left"></a-entity>
<a-entity hand-controls="right"></a-entity>

残念ながら、すべての種類の3DoFコントローラ（Daydream、GearVRなど）をうまく抽象化した3DoFコントローラコンポーネントはまだ存在しません。両方のコントローラーで動作するカスタムコントローラーを作ればいいのですが、かなり簡単ににカバーできるでしょう。3DoFコントローラはインタラクションの可能性をあまり提供しないので（つまり、タッチパッドによる回転トラッキングのみ）

しかし、現在A-Frameがサポートしている6DoFと3DoFのコントローラを全てカバーするコントローラ・コンポーネントがあります：laser-controlsです。

# カスタムコントローラの作成

前述したように、アプリケーションは、体験に合わせてコントローラをカスタマイズするのが最適です。ほとんどのVRアプリケーションは、それぞれ独自の操作体系を持っています。これは、異なるモデル、アニメーション、ジェスチャー、ビジュアルフィードバック、そして状態を意味します。

ハンドコントロールのソースコード (opens new window) のソースコードを見ることは、ゼロからすべてを行うことなく、カスタムコントローラを行う方法を理解するための適切な方法です。

tracked-controlsコンポーネントは、ポーズとイベントを提供します。
vive-controls、oculus-touch-controls、daydream-controls、またはgearvr-controlsコンポーネントは、ボタンマッピングのコントローラ固有のイベントを提供します。
カスタムコントローラコンポーネントは、上記のすべてに加え、モデル、アニメーション、ビジュアルフィードバック、ステートなどをオーバーライドして構築されます。

最初の1歩は、どのコントローラコンポーネントをサポートするかを決めることです。コントローラコンポーネントはトラッキングコントロールコンポーネントも内包します。例えば、全てのコントローラをサポートするには、手を提供し、モデルをオーバーライドして、全てのコントローラコンポーネントを設定します。

AFRAME.registerComponent('custom-controls', {
  schema: {
    hand: {default: ''},
    model: {default: 'customControllerModel.gltf'}
  },

  update: function () {
    var hand = this.data.hand;
    var el = this.el;
    var controlConfiguration = {
      hand: hand,
      model: false,
      orientationOffset: {x: 0, y: 0, z: hand === 'left' ? 90 : -90}
    };

    // Build on top of controller components.
    el.setAttribute('vive-controls', controlConfiguration);
    el.setAttribute('oculus-touch-controls', controlConfiguration);
    el.setAttribute('daydream-controls', controlConfiguration);
    el.setAttribute('gearvr-controls', controlConfiguration);
    el.setAttribute('windows-motion-controls', controlConfiguration);

    // Set a model.
    el.setAttribute('gltf-model', this.data.model);
  }
});

実際のアプリケーションでの高度な例については、A-Painterのpaint-controlsコンポーネント (opens new window)やA-Blastのshoot-controlsコンポーネント (opens new window)をご覧ください。

# ボタンと軸のイベントをリスニングする

コントローラには多くのボタンがあり、多くのイベントを発信しています。それぞれのボタンに対して、ボタンが押されたり、離されたり、場合によってはタッチされたりするたびにです。また、各軸（トラックパッドやサムスティックなど）に対しては、それがタッチされるたびにイベントが発生します。ボタンを処理するには、それぞれのコントローラコンポーネントのドキュメントページで、イベントテーブルからイベント名を探し、好きなようにイベントハンドラを登録します。

vive-controlsイベント
ウィンドウズ・モーション・コントロール・イベント

例えば、Oculus Touch の X ボタンが押されたことを聞き、エンティティの可視性をトグルすることができます。

コンポーネント形式ではこのようになります。

For example, we can listen to the Oculus Touch X button press, and toggle visibility of an entity. In component form:

AFRAME.registerComponent('x-button-listener', {
  init: function () {
    var el = this.el;
    el.addEventListener('xbuttondown', function (evt) {
      el.setAttribute('visible', !el.getAttribute('visible'));
    });
  }
});

そしてコンポーネントを付与します。

<a-entity oculus-touch-controls x-button-listener></a-entity>

# コントローラーのレーザーインタラクションの追加

レーザーインタラクションは、コントローラから可視のレイキャスター（線）を出すことを指します。エンティティがラインと交差するとき、交差中にコントローラのボタンが変化するとき、エンティティがラインと交差しなくなったときに、インタラクションが発生します。このインタラクションは、レイキャスターがヘッドセットではなくコントローラに固定されていることを除けば、視線ベースのインタラクションに非常に似ています。

レーザーコントロールコンポーネントは、コントローラのためのレーザーインタラクションを提供します。使い方はカーソルコンポーネントとほぼ同じですが、コンポーネントをカメラの下ではなく、コントローラに取り付けます。

<a-entity laser-controls="hand: right"></a-entity>

そして、レイキャスターの長さを調整することで、光線のデフォルトの長さが設定されます。光線がエンティティと交差するとき、レーザーの長さは切り捨てられます。

<a-entity hand-controls laser-controls raycaster="far: 2"></a-entity>

そして、イベントとインタラクションの処理は、カーソルコンポーネントによる視線ベースのインタラクションと全く同じです。上のセクションを参照してください

# コントローラにルームスケールインタラクションを追加する

ルームスケールインタラクションはもっと難しい。3D空間でのインタラクションや、つかむ、投げる、伸ばす、打つ、回す、引く、押すなどの両手でのインタラクションが含まれます。ルームスケールインタラクションの数や複雑さは、私たちが完全にカバーできるものではありません。マウスとタッチスクリーンだけの2Dウェブや、コントローラを振るだけの3DoF VRとは異なります。しかし、そのまま、あるいはリファレンスとして使えるような様々な実装方法を示すことはできます。

ルームスケールや3Dのインタラクションでは、レイキャスターを使ってオブジェクトとの交わりを検出するのではなく、コライダーを使用します。レイキャスターが2Dのラインであるのに対し、コライダーは3Dのボリュームです。コライダには、オブジェクトを包み込むさまざまな形状（AABB/box、sphere、mesh）があり、それらの形状が交差すると衝突が検出されます。

# super-hands コンポーネント

William Murphy氏によるsuper-handsコンポーネント (opens new window) は、オールインワンで自然なハンドコントローラとのインタラクションを提供します。このコンポーネントは、追跡されたコントローラや衝突検出コンポーネントからの入力をインタラクションジェスチャーに解釈し、それらのジェスチャーをターゲットエンティティに伝達し、応答させることができます。

現在実装されているジェスチャーは以下の通りです。

ホバー。コントローラをエンティティの衝突空間に保持する。
Grab: ホバリング中にボタンを押し、移動させる。
ストレッチ両手でエンティティをつかみ、サイズを変更する。
ドラッグ・ドロップエンティティを他のエンティティにドラッグする

super-handsのジェスチャーに反応するためには、ジェスチャーをアクションに変換するコンポーネントが必要です。super-handsには、hoverable, grabbable, stretchable, drag-droppableという、実装されているジェスチャーに対する典型的な反応をするコンポーネントが含まれています。

super-handsのドキュメント (opens new window)とサンプル (opens new window)は、使い始めるのに最適なものです。私たちは、それらに従うことにします。

# その他のサンプル

他に以下のサンプルを見ると良いでしょう

tracked-controls (opens new window) - スフィア・コライダーとグラブ・コンポーネントによるインタラクション。
ball-throw (opens new window) - aframe-extras (opens new window) と aframe-physics (opens new window)を使った掴みと投げ。 .
vr-editor (opens new window) - Interaction through 　複製、移動、削除、配置、拡大縮小など、単一のvr-editorコンポーネントによるインタラクションを実現。

← コンポーネントを書く 3D モデル →