2015年9月26日土曜日

[javascript][gyrosensor] html5 でジャイロセンサーをいじくる。

休みの朝の小一時間のプログラミング。
javascript で、ジャイロセンサー(傾きセンサー) も触れるみたいすね。

http://ics-web.jp/lab/archives/4095

html5 の navigator.geolocation の heading が端末によって?取れねーと思ってて、
どうやって解決しましょということで、触ってみました。

http://www.psychedesire.org/sample/test_gyro.html

スマホのブラウザ(Android Chrome or Android Firefox)で開いてみてください。
で、押してみるってボタンを押すと、
なんか、テキストボックスが傾きによって動くと思います。

で、ほげもん豪にこれを組み込みました。

http://www.psychedesire.org/sample/test_hoge_a3.html


http://www.psychedesire.org/sample/test_hoge_a4.html

例によってAndroid の Firefox のみで動作確認。
右上の緑ニコチャンを押して緑の四角を表示させると、
緑の四角が傾きによって動くと思います。
これ、結構THREE.js の視野角と、
実際のスマホのジャイロセンサーの傾き角度の感覚を、
人間の体感感覚に合わせる調整が必要ですね。
一応、既に調整はしてあります。

http://www.psychedesire.org/sample/script/GPS.js

の28行目と29行目の0.1とかかけてあるところですね。
あと、回転角の符号反転をしないと、
自分のスマホの傾きと、
画面上のオブジェクトの見え方が一致しなくなります。

地球が丸いという事実に合わせて、
色々と修正しまくっているので、
その都度 GPS.js を観察してくださいw
この辺にやり方書いてあった。

http://stackoverflow.com/questions/28365948/javascript-latitude-longitude-to-xyz-on-sphere-three-js

0 件のコメント:

コメントを投稿