Google Cardboardのボタンを使ってA-Frameで移動するにはどうすればよいですか？

Question

私はA-Frameを使用してWebVRアプリケーションを作成しています。アプリはほとんどがCardboardユーザーに合わせて作られています。デスクトップでは、WASDを使用して移動するために、wasd-controlsコンポーネントをカメラに追加するだけです。しかし、カメラの方向によって方向が決まる段ボールのボタン（つまりスクリーンタッチ）を代わりに使用するだけで、同じ方法で移動することができます。 A-Frameでこれを行う簡単な方法はありますか？

Answer 1

あなたが指摘しているように、wasd-controlsは実際にデスクトップキーボードコントロール用に設計されています。私は比較可能なuniversal-controls componentを書きました。これは、場合によってはlook-controlsとwasd-controlsの両方を置き換えることができます。このコンポーネントでは、段ボールボタンを押すと、それが向いている方向にカメラを移動します。

<a-entity camera universal-controls></a-entity> 

また、あなたは「チェックポイント」を定義することができ、ユーザーがそれらを注視するとき、カメラをテレポート。多くの場合、これはユーザーエクスペリエンスが向上する場合があります。 Demoおよびsource。

<!-- Player --> 
    <a-entity camera="userHeight: 1.6" 
      universal-controls="movementControls: checkpoint" 
      checkpoint-controls="mode: teleport"> 
    <a-entity cursor 
       position="0 0 -1" 
       geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03;" 
       material="color: #CCC; shader: flat;"> 
    </a-entity> 
    </a-entity> 

    <!-- Terrain --> 
    <a-grid></a-grid> 

    <!-- Checkpoints --> 
    <a-entity position="1 0 1"> 
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="0 0 -5.2" color="#39BB82"></a-cylinder> 
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="3 0 0" color="#39BB82"></a-cylinder> 
    <a-cylinder checkpoint="offset: 0 1.6 0" radius="1" height="0.1" position="-3 0 0" color="#39BB82"></a-cylinder> 
    </a-entity> 

これらのオプションの両方が、フレームにいくつかの構成要素を付加する、aframe-extras packageに実装されています。