2019年11月20日水曜日

ラズパイ(カメラ・27)

前回、Three.jsをつかってグリグリ動かせるWebページの
ベースができましたので、おつぎは、スマホで表示
したときに、傾けた角度によって視点が
変わるようにジャイロに対応してみます。
変更する部分は、以下となります。
<script type="text/javascript" src="./js/DeviceOrientationControls.js"></script>

  if (isAndroid || isIOS) {
    // スマートフォンまたはタブレット端末の場合、ジャイロセンサーで視点操作を可能にする
    // ジャイロの取得には、SSLが必要(https://)
    window.addEventListener('deviceorientation', setOrientationControls, true);
  } else {
    setOrbitControls(); // パソコンの場合、マウスドラッグで視点操作を可能にする
  }

// ジャイロセンサーで視点操作する
function setOrientationControls(e) {
  if (!e.alpha) return; // スマートフォン以外で処理させない
  controls = new THREE.DeviceOrientationControls(camera, true);
  controls.connect();
  controls.update();
  window.removeEventListener("deviceorientation", setOrientationControls, true);
}

ただ、最近のセキュリティ管理の一環で、以前はこれで動いていましたが、
SSLが設置されているサイトでないと角度を取ることができなくなってしまっている
ようです(汗

https://www.filetalk.info/index.html

0 件のコメント:

コメントを投稿