A-Frameでタップ(クリック)できるようにしてみた
こんにちは。
最近、A-FrameでUIを作ったり動画を見られるようにしたりしていますが、その中である思いが強まってきました。
普通にタップorクリックしたい・・・
視線クリックも、VRモードでは便利なのですが普通に操作している時は少々煩わしいです。そこで調べてみたところ、とても簡単にできることが分かりました。
こちらに書いてあるように、なんとカーソルを次のように書くだけです!
<!-- これを次の様に変更する <a-cursor></a-cursor> --> <a-entity cursor="rayOrigin: mouse"></a-entity>
A-Frame 1.0.4で動いています。また、スマホのタップもきちんと反応します。
一応、前回の動画ビューワを改造した例も作ってみました↓
quirky-hopper-c5acee.netlify.app
今回はかなり短いですが以上です。
【追記メモ】
その後、PCでは普通に動いているのにスマホだと2回クリックイベントが発生してしまうという謎挙動が発生した(しかも毎回ではなくランダムに起こる)ので、回避策をメモしておきます。
私は基本的に次のようにしてクリックイベントを実装していました。
HTML↓
<a-entity id="button" click-change geometry="primitive: ring; radiusInner: 0.75; radiusOuter: 0.8" material="color: white; side: double;" raycaster="objects: .clickable" > </a-entity>
AFRAME.registerComponent('click-change', { init: function () { this.el.addEventListener('click', function (event) { //クリック時の処理 }); } });
そしておそらく、EventListenerの'click'で誤作動が起こるようだったので、'mouseup'に変更したところうまく動くようになりました。
ちなみに、clickとtouchstartで処理を分ける事も試してみたのですが、なぜかtouchstartは全く反応しませんでした・・・。