AR.jsでスクロールバーが発生する件

課題

AR.jsで生成されるVideoタグで、Android ChromeやiOS Safariでスクロールバーが発生したり、拡大縮小できてしまったりする。
Safariでは、aframeのscreenshotメソッドを使うとスクロールバーが発生してしまう。

ピンチイン・アウトでモデルの大きさを変えたり、ドラッグで位置を変えたい時、スクロールバーが発生していると操作がうまく行かない。

aframe 0.8.0
ar.js 1.7.7

解決策

まず、htmlのmetaタグに以下を指定する。

index.html

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, shrink-to-fit=no,user-scalable=no,viewport-fit=cover">

そしてjsファイルに、スマホのドラッグ操作を禁止するコードを追加すればOK。

index.js

document.addEventListener("touchmove",
   function(e) {
      e.preventDefault();
   }, { passive: false }
);

ドラッグやピンチでモデルの位置・大きさを変えたい時は、別途指定してあげる。
touchmove のイベントリスナーはスマホでしか動作しないので、注意。

index.js

let divElement = document.getElementById("target");

divElement.addEventListener("touchmove", function(event) {
   // ドラッグ時の処理
}

参考

• github