Aフレームメニューの作成方法 - webvr

Question

私はフレームを使用しています。シーンやその他のアクションを切り替えるためのメニューを画面に追加したいと思います。 これを達成する方法はありますか？ 私は100％ではないaframe-ui-modal-componentを検索して見つけましたが、何らかのメニューを表示しますが、そのボタンをクリック可能にしてアクションを開始できません。

Answer 1

プレーンエンティティまたは湾曲した画像を使用してメニューを表示できます。 JavaScriptを使用して、あなたはこれらのボタンのクリック可能を作ることができます：

document.querySelector('#menu1');.addEventListener('click', function() { 
model.setAttribute('visible','true'); 
} 

Answer 2

それは、2Dスペース（xとyスクリーン座標のオフに基づいているため、マウスクリックから、一般的なJavaScriptのイベントリスナを達成するための直接的な方法はありません）、ここではWebVRが3D空間を扱っているため、3D空間でどこを指しているのかを判断するためにレイキャスティングが必要です。

間接的な方法がないとは限りません。私は、最短の（そして機能が豊富ではない）ソリューションを最初に提供し、最後にはより複雑なソリューションを提供します。クリックし、MouseEnterイベント、およびmouseleave：https://www.npmjs.com/package/aframe-mouse-cursor-component

これは、次の3つのマウスイベントを登録することができます：

ここにマウスカーソルライブラリがあります。これは、カメラからマウスポインタへのレイキャスターを描画し、あなたが指しているオブジェクトを外挿します。

あなたはVRビューのカーソルを使用したい場合は、そこにある：https://aframe.io/docs/0.2.0/components/cursor.html

ここでは、ホバーを登録し、あなたが見ているものからイベントをクリックすることができます。

メニュー、マウス、またはビューカーソルとの対話に使用するこれらの入力デバイスのうち、どちらを使用してもかまいません。今すぐメニュー自体に。

miauzが指摘しているように、プレーヤを作成し、javascriptを使用してプレーンを作成し、イベントリスナーを添付することができます。あなたがイベントリスナーに新しいしている場合は、ここでチュートリアルを見つけることができます：あなたの平面上の

http://www.w3schools.com/jsref/met_document_addeventlistener.asp 

テキスト：

https://www.npmjs.com/package/aframe-bmfont-text-component 

を今すぐあなたにあなたの典型的な2Dのイベントを変換するためにサードパーティのライブラリを持っています3D環境、およびあなたのメニューに含まれる飛行機のオブジェクト（ボタン）で使用するイベント。

---

複雑な方法：あなた自身でレイキャスターを使用することができます。

これはより詳細なコード行ですが、十分に熟練すればもっと多くのコードを実行できます。たとえば、カメラから伸びる線に沿ってすべてのオブジェクトを取得することができますが、上の単純なソリューションでは最も近いものだけが得られます。

こちらがお役に立てば幸いです。がんばろう！