AFrame：エンティティにタッチイベントリスナーを追加する方法

Question

モバイルブラウザでは、ユーザーが画像に触れるときに何かしたいですが、タッチリスナーの使い方はわかりません。私は使用できるいくつかのコンポーネントがありますか？または私自身でそれをどうやって行うか考えてください。

Answer 1

A-Frameは、Web通常ページと非常によく似たDOMイベントをサポートしています。例：JavaScriptで

<a-scene> 
    <!-- Target --> 
    <a-box id="target" material="color: green"></a-box> 

    <!-- Camera + Cursor --> 
    <a-entity camera> 
    <a-entity cursor="fuse: true; fuseTimeout: 500" 
      position="0 0 -1" 
      geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03" 
      material="color: black; shader: flat"> 
    </a-entity> 
    </a-entity> 
</a-scene> 

そして：

var targetEl = document.querySelector('#target'); 
targetEl.addEventListener('click', function() { 
    targetEl.setAttribute('material', {color: 'red'}); 
}); 

-フレームのcursor component documentation詳細についてを参照してください。