link | A-FRAME

リンクコンポーネントは、エクスペリエンス間を接続し、VRのWebページ間を行き来できるようにするものです。イベントによってアクティブになると、リンク・コンポーネントは、通常の Web ページのリダイレクトと同じように、ユーザーを別のページに送ります。ページをまたいでVRを維持するためには、以下の条件が必要です。

ブラウザが WebXR の in-VR ナビゲーション案 (opens new window)を実装していること。これはまだ標準の一部ではないことに注意してください。サポートは実験的なもので、ブラウザによって異なり、設定で手動で有効にする必要がある場合もあります。

移動先の Web ページは、ウインドウの sessiongranted (opens new window) イベントを受信して、VR 内に入ります。A-Frameの体験は、デフォルトでこのように動作します。
現時点では、クエストのOculus Browserは、VR内ナビゲーションの案 (opens new window)を実装している唯一のブラウザです。

# リンクのユーザーエクスペリエンス

VRにおけるリンクは、物体を掴む、頭に何かを乗せる、何かをクリックする、何かを食べるなど、あらゆることが可能です。リンクのデフォルトの実装は、ポータルまたはウィンドウとして、360°画像のサムネイルを使って目的地をプレビューするようになっています。

リンクトラバーサルのUXは、コンテンツとブラウザの両方で、繰り返し実験を行いながら、改良を続けていきます。

# Controls

ポータルとしてのリンクコンポーネントのデフォルトのUXは、カーソルやコントローラを使用して操作することができます。これはA-Frameのコアでは直接提供されていませんが、A-Frameのサンプルではlink-controlsコンポーネント (opens new window)が用意されています。このコンポーネントは、ツールチップを表示し、ポータルを覗いたり入ったりするためのボタンマッピングを提供します。

# 例

<a-scene>
  <a-assets>
    <img id="homeThumbnail" src="home.jpg">
  </a-assets>

  <a-entity link="href: index.html; title: My Homepage; image: #homeThumbnail"></a-entity>
</a-scene>

また、構文が異なるリンクプリミティブも用意しています。

<a-link href="index.html" title="My Homepage" image="#homeThumbnail"></a-link>

# プロパティ

Property	概要	デフォルト値
backgroundColor	ポータルの内側(背景)の色。	red
borderColor	ポータルの境界線の色	white
highlighted	ブール値で、リンクのハイライト色を切り替えます。	false
highlightedColor	ポータルの境界線のハイライト時の色	'#24CAFF'
href	リンクがポイントされた時の行き先URL	''
image	ポータルでシーンのプレビューとして使用される360°画像。360° イメージ要素やURLのセレクターとなります。	''
on	リンクトラバースのトリガーとなる、リスニングするイベント。	'click'
peekMode	360°画像をプレビュー用に完全に拡大するかどうか。	false
title	リンクに表示されるテキスト。定義されていない場合は、hrefまたはページのURLが使用されます。	''
titleColor	リンクに表示されるテキストの色	white
visualAspectEnabled	ポータルのデフォルトのビジュアルアピアランスを有効にするかどうか。独自のパターンやリンクトラバースの形式を実装したい場合は、false を設定する。	true

# 手動でナビゲーションする

手動で移動する場合は、window.location APIを使用します。ナビゲートについては、StackOverflowのこの質問 (opens new window)を参照してください。例えば以下のような形です

window.location.href = 'https://supermedium.com/supercraft/';
// or window.location.replace

← line loading-screen →