タイトルのとおり。
micro:bitでUARTのBLE通信を使い、WebBluetoothAPIからThree.jsを操作する。
もう少し噛み砕いて書くと
加速度センサーを搭載したmicro:bitからUARTをBLEで飛ばし、ブラウザのWebBluetoothAPIからThree.jsの3D geometryを操作するだけである。
日本語で書くと（？）
加速度センサーを搭載したマイクロビットからユーアートをブルートゥースローエナジーで飛ばし、ブラウザのウェブブルートゥースエーピーアイからスリージェイエスのスリーディージオメトリーを操作するだけである。
私も何を言っているのかサッパリだが、このまま進める。
箱を買ってくる
トカチニッチなので十勝らしい箱が良いと考えた。
六花亭の店員さんに「このタイプの箱のフタは、どんな模様ですか？」と怪しい質問を投げる。
大きさもちょうど良い「マルセイバターサンド5個入り」を購入。自腹。
Three.jsで箱を作る
中身は必要ないので昼食にする。5個全部食べる、美味しい。
定規で箱のサイズを測り、近い尺で適当に箱っぽいgeometryを作成。
箱をスキャンして6面テクスチャを貼る。
準備完了。
とにかく頭空っぽにしてデモ動画↓を観たらいいょ。
今回作ったもの、デモ動画
動画内で起動しているソフトはインターネットブラウザChrome。
ブラウザで表示している3Dオブジェクトの傾きを実際に手に持った箱で操作している。
正直うまく解説できない、時系列で書く。
※長くなるので細かい解説は省くょ。
意地でもブラウザ（とjavascript）で、やる
VRのゲームを作ってみたい。
加速度センサー搭載のコントローラを使えたらいいね、という話になったのが今回の動機。
フロントエンドの代名詞ともいえるWEB屋の我々。
「ブラウザに根をおろし、Googleとともに生きよう。ブラウザから離れては生きられないのよ。」
WebBluetoothAPIを使えばブラウザとBLEデバイスを通信することができるとの情報をキャッチ。
アラフォーエンジニアにとって“できないこと”の方が多いというイメージのインターネットブラウザであるが、近年の著しい機能向上は目を見張るものがある。
「ChromeならBluetoothデバイスだって扱えるぞ」というGoogle先生の力を信じることにする。
Chromebookとmicro:bitを購入
試しにiPhoneに「LightBlue」というアプリをインストール、疑似BLEデバイスにすることが可能。
こちらのページ↓でスキャンを試しながら動きそうな環境を探す。
scanで Hello, BLE（クラゲのIoTテクノロジー）
- スキャン失敗 ← Windows × Chrome
- スキャン失敗 ← iOS（会社の古いヤツ）× Chrome
- スキャン成功 ← Android（スマホ） × Chrome
やはりGoogle先生が手掛けたOSの方が安定して動作する様子。
開発の確認用マシンとして「Chromebook」を購入。昨年モデルの安いヤツで充分。
加速度センサーは、プログラミングも手軽にできる「micro:bit」が入門に良さそう。
micro:bitの色ガチャは“赤”。緑が欲しかった。
最近どなたかのご子息（小学生）が夏休みの宿題を「Chromebook × micro:bit」の組み合わせで開発してる、とか耳にしたような。
結果的に小学生の開発環境パクった感じになったが、大人の方が偉いので黙っておく。
Bluetooth UARTにする
加速度センサーのサービスをテストし、動作を確認。
ACCELEROMETER SERVICEの数値をBLE通信してブラウザで取得することに成功する。
お世話になったページ↓
micro:bitとWebBluetoothで通信してみました（Qiita@yokmama）
しかし…xyzの加速度がわかったところで動画デモに必要な傾き（pitch/roll/yaw）に変換する方法が理解できない。
傾きに変換する計算式を試したところでThree.jsでrotationするxyzとは違うような。
学生のとき習ったでしょと言われても、“記憶にございません”だ。
幸い簡単なプログラミングができるmicro:bit。
傾き（ピッチとロール）を取得できるようなのでそちらの数字をもらう。
UART SERVICEで文字列さえ通信できれば受け側のjavascriptで“何とでもなるだろう”というフロントエンドらしい（？）考え方。
Bluetooth UARTで文字列送信のテスト
- デモページ ※Chromeのみ
- ソースコード
- micro:bitはこんな感じ
micro:bitのボタンを押すとブラウザに文字列を送信してalertで表示される仕組み。
文字列の受信ができたので、あとはピッチとロール送ればよいはず。
ついでにBLEとの通信前にThree.jsでxyzへのrotationがどんな感じになるかのテストも作る。
Three.jsのrotation確認用
xyzの角度を変更するとオブジェクトが回転する。
micro:bitの数値をこの角度に変換することができればゴールである。
箱にmicro:bitを仕込む
空き箱の中心にプログラミングしたmicro:bitを仕込む。
黒いのはただの電池ケース。接着は両面テープ。
箱でThree.jsの箱オブジェクトを操作する
箱に仕込まれたmicro:bitからBluetoothでChromebookのブラウザに傾き（ピッチとロール）を送信。
ブラウザ側では受信したピッチとロールの文字列を数値に変換し、それぞれrotation.xとrotation.zに代入するだけ。
反省と課題
動画を見ればわかるが、yawの概念がないため方向が固定になる。動画で、天地そのまま裏返した際の方向が狂っているのがそう。（※デモ動画0:37あたり）
磁力計サービスを使えばyawも扱えるのだろうか。
90度（の倍数）あたりの挙動も怪しい、まだまだブラッシュアップが必要…なのだが、今回はここで力尽きる。
ただ“ゲームの入力デバイス”という点を考慮すれば、稼働範囲を制限したり、表裏対称にして誤魔化すことで解決する問題があるのも確か。
完全な動きを再現する必要はないのかもしれない。
以上、勉強時間は20時間ほど。
無事micro:bitからUARTをBLEで飛ばし、ブラウザのWebBluetoothAPIからThree.jsの3D geometryを操作することに成功したのであった。
【PR】 Amazonで「Three.js」
