視聴者の位置と向きをプログラムで設定する

Question

私はA-Frame v3.6.0を使用しています.3Dオブジェクトをクリックした後、視聴者の位置と方向を設定したいと思います。私はカメラとカーソルの要素を定義するには、このコードを使用しています：

<a-entity camera="userHeight: 1.6" universal-controls position="0 -1 4"> 
    <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity> 
</a-entity> 

私はsetAttributeメソッドの位置を更新するために呼び出して使用する例を見てきましたが、私はカメラオブジェクトを取得する方法がわからない、またはどのように設定します方向ベクトル。

Answer 1

A-Frame要素は、HTML要素と同じ方法で取得できます。それにIDを付け、およびIDでそれを選択：
HTML：<a-entity id="camera" camera="universal-controls">
JS：document.querySelector('#camera').setAttribute('position', {...})

だけrotation属性を使用し、方向を変更します。特定のベクトルの角度を得るために独自の数学を行うことはできますが、look-atはほとんどの使用例を処理します。 3つには数多くの便利な数学関数もあります。

ただし、カメラの位置と回転はヘッドセット/デバイスから自動的に設定されることが多いため、カメラエンティティを直接変更するのではなく、カメラのラッパーを修正する必要があります。

HTML：

<a-entity id="camera-wrapper"> 
    <a-entity id="camera" universal-controls> 
     <a-entity cursor position="0 0 -1" geometry="primitive: ring; radiusInner: 0.020; radiusOuter: 0.028" material="color: #95E0E8; shader: flat"></a-entity> 
    </a-entity> 
<a-entity> 

JS：document.querySelector('#camera-wrapper').setAttribute('position', {...})