🔒 micro:bitでバーチャル地球儀（2022/11/05更新）

このようなバーチャル地球儀を作成します！
リアルなボールを回転させると、PC画面のバーチャル地球が連動してぬるぬる回転します。
マウスやタッチパネルなど普段のPCやスマホ等では味わえない操作体験が得られます！

この例では中央に表示されている国のCovid-19情報を表示していますが、様々にカスタマイズ可能です。
システムとしては、9軸センサーからクォータニオン情報を取得し、micro:bitを通じてBLE通信を行いPCへ送信、PC側でthree.jsを使った3Dプログラミングを行っています。

学べること

micro:bitを使った電子回路基礎
Seeeduinoの使い方
9軸センサーからクォータニオン情報取得
UART通信とI2C通信の基礎
three.jsでの3Dプログラミング

部品購入

必須

必要なスキル

HTML/JavaScript/CSSの初歩的なプログラミング力
ブレッドボード配線や簡単なハンダ付け等の初歩的な電子工作
micro:bitとMakeCodeの基本操作※1
micro:bitのBLE通信※2

micro:bitのMakeCodeには実行できるシミュレーターがありますが、BLE通信はシミュレーションでは動きませんのでmicro:bitの実物が必要です。

必要な部品

こちらのスターターキットの購入をお勧めします

micro:bit go V2スターターキット

※「セッションの有効期限がきれました」と表示された場合は、そのままブラウザのページ更新を行ってみてください
※在庫切れの場合はこちらの代替品をご参照ください

micro:bitは2020年11月に新バージョンであるV2が発売されました。
他のショップで買う場合はV1かV2か確かめてから購入しましょう。V2の大きな変更点として「マイク」「スピーカー」が追加になっています。
値段は同じなのでV2を購入しましょう。

スターターキットの中身です。
その名の通り、スタートするための部品がすべて揃っています。

micro:bit V2本体
単4電池ケース
単4電池2本
microUSBケーブル
簡易ケース

加えて、今回のバーチャル地球儀用に以下8点が追加で必要です。

必要な工具

基板にピンヘッダを付けるだけの簡単なハンダ付け作業が必要です。
既に持っている方は新たに購入する必要はありません。

ポイント

バーチャル地球儀全体のシステムについて説明します。

全体システム

「MPU-9250搭載モジュール」「Seeeduino XIAO」「micro:bit」がペリフェラルで、PCがセントラルです。
BLEを使ってペリフェラルからセントラルへデータ送信します。送信データは「クォータニオン」という3次元上でどのような向きに回転しているかを計算できる情報で、PC側でその情報を元に3次元描画を行います。

MPU-9250搭載モジュール

「3軸加速度センサー」「3軸地磁気センサー」「3軸ジャイロセンサー」が内蔵されているセンサーボードです。
いわゆる「IMU」と呼ばれるボードですが、その中でも非常に安価なセンサーボードです。今回はI2C通信を使ってセンサーデータを取得します。

Seeeduino XIAO

いわゆる「Arduino」に属するマイコンボードです。「クォータニオン」を取得するためにDMPというソフトウェアライブラリを活用しますが、どのマイコンでも良いわけではなく、「SAMDアーキテクチャー」である必要があり、その中でも非常に安価なマイコンボードです。「micro:bit」側へはUART通信を使ってデータを送信します。

micro:bit

脇役として使用します。
「micro:bit」の中にも「3軸加速度センサー」「3軸地磁気センサー」が内蔵されており、6軸センサーとして姿勢計算も可能ですが、精度不足のため外部に「9軸センサー」を付けています。なお「micro:bit」と「9軸センサー」のみでペリフェラルを構成することも可能ですが、性能不足でBLE送信が不安定になるため、「Seeeduino XIAO」を外付けで追加しています。
今回の「micro:bit」は、「Seeeduino」から有線シリアル通信（今回はUART）で送信されたデータを、中身はそのままで無線BLEに乗せ換えて送信する「ゲートウェイ」としての役割になります

PC

JavaScript/HTML/CSSによりBlueJellyを活用してBLEデータを取得します。
HTML上で3D描画を行うためにWebGLという仕組みを活用しますが、これを比較的簡単に制御できるthree.jsを使います。

はんだ付け

Seeeduino XIAOは袋の中にマイコンボードと7pinのピンヘッダ2つが入っています。シールも入っていますが、特に使わなくても問題ありません。
ブレッドボードにピンヘッダ（足が長い方）を挿して、マイコンボードを載せ、14pin全てをはんだ付けしてゆきます。ブレッドボードを使うのは、ブレッドボードにはんだ付けする訳ではなく、はんだ付けしやすいためです。はんだ付け後はブレッドボードから取り外せます。

はんだ付けのコツは、「ピン」に「はんだ」を当ててから「はんだこて」を近づけるのではなく、「ピン」に「はんだごて」を当ててから「はんだ」を近づけてゆくことです。
最終的なはんだ量は多過ぎず、少な過ぎず、富士山のような形になるのがベストです。
参考：電子工作のコツ/はんだ付け

今回はこのような感じで使います。

Seeeduino開発環境準備

Seeeduinoにプログラムを書き込むための開発環境を整えます。
こちらのサイトをベースに説明します。

Arduno IDEインストール

Seeeduinoにプログラムを書き込むためにArduino IDEを準備します。既にPCにArduino IDEがインストールされている方は次に進んでください。
Arduinoにもクラウド上で開発できるエディタが存在しますが、おそらくそちらでは動かないと思いますので、PCにインストールをしてください。
ダウンロードの際に一見料金がかかるような感じを受けますが、それは寄付する場合です。JUST DOWNLOADを選べば無料でダウンロード可能です。

Arduno IDE

インストール方法などで不明点があれば、各自ググってください。

Arduino IDE環境設定

既存のサンプルコードを開きます。

ファイル > スケッチ例 > 01.Basics > Blink

SeeeduinoがArduino IDEで使えるようにします。
まずは環境設定にてJSONファイルを指定します。

ファイル > 環境設定

追加のボードマネージャのURL:
https://files.seeedstudio.com/arduino/package_seeeduino_boards_index.json

※Macの場合は Arduino > Preferences

次にボードマネージャでパッケージをインストールします。
Seeeduino XIAOと検索するとSeeed SAMD Boardsというパッケージのみが表示されるのでインストールします。
既にインストール済なので、この画像と少し異なると思いますが、「インストール」ボタンをクリックして下さい。

ツール > ボード > ボードマネージャ...

検索ボックス:Seeeduino XIAO

インストールされたボードを選択します。

ツール > ボード: "Seeeduino XIAO" > Seeed SAMD Boards > Seeeduino XIAO

プログラムの書き込み

Seeeduino XIAOとPCをUSB type-Cケーブルで接続します。
その後、Arduino IDEにてSeeeduino XIAOのシリアルポートを選択します。この画像では、WindowsのためCOMになっていますが、ポート名称はOSによっても異なります。また番号5については各自の環境によって異なりますので、適宜読み替えて下さい。

プログラムをマイコンボードに書き込みます。
画像のボタンをクリックして少し待ちます。一瞬フォルダが表示されてすぐに消えると思います。

書き込みが成功すると、Arduino IDEの左下にその旨が表示されます。
もし、エラーになる場合は、このページ一番下に記載している「書き込みエラーになる場合」をやってみて、それでもダメなら別の原因かもしれないのでググって下さい。

Seeeduino XIAOのオレンジ色のLEDが約1秒間隔で点滅していれば成功です！（黄色いLEDは常時点灯）

USBシリアル出力

Seeeduino XIAOからUSBシリアルでPCへ文字列出力を行います。

Arduino IDEにて新規ファイルを作成して下さい。

ファイル > 新規ファイル

コードを以下のようにしてください。

int counter = 0;

void setup() {
  // put your setup code here, to run once:
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
  Serial.println("Hello, world");
  Serial.println(counter);
  delay(500);
  counter++;
}

先程と同じ要領で書き込みます。書き込みが成功したら「シリアルモニタ」を開きます。

このような感じで、Hello, worldとカウントアップする数値がずっと表示されれば成功です。
赤枠部は9600 bpsにして下さい。

9600という数値は「ボーレート」というデータ転送時に使う値で単位はbpsです。今回のようなUSBシリアル通信や後に扱うUART通信を行う際は、この「ボーレート」が必要で、送信側と受信側で数値が一致している必要があります。一致してないと、データを全く受け取れなかったり、文字化けする場合があります。

ArduinoのAPIに関しては詳しく知りたい方はこちらのサイトが分かりやすいですのでご参考にどうぞ。

Arduino 日本語リファレンス

書き込みエラーになる場合

ジャンパー線を使ってハードウェアでリセットをかけてみてください。
オレンジ色のLEDが一瞬光ります。

画像引用元：seeedstudio

それでもダメな場合はPCのUSBポートを変えてみて下さい。

「Seeeduino XIAO」で「MPU-9250搭載モジュール」からセンサー情報を受取り、DMP(Digital Motion Processing)を行うことによって最終的に「クォータニオン」という情報をUSBシリアルで出力させます。

はんだ付け

「Seeeduino XIAO」と同様に「MPU-9250搭載モジュール」にも付属されているピンヘッダをはんだ付けします。

実際に使うのは4pinだけですが、全pinに付けた方が安定するため、合計10pinのはんだを行います。

回路結線

今回使用する部品は以下の通りです。
ブレッドボードでジャンパーワイヤーの結線を行ったことがない人は、「ブレッドボード」について少し調べてから結線することをお勧めします。

Seeeduino XIAO（ピンヘッダはんだ付け済）
MPU-9250搭載モジュール（ピンヘッダはんだ付け済）
ミニブレッドボード
ジャンパーワイヤー（オスーオス）4本

以下のように結線してください。

実際の写真も載せておきます。

「Seeeduino XIAO」と「MPU-9250搭載モジュール」の通信はI2Cを使います。
以下がジャンパー線の色に対する信号線の役割です。

ジャンパー線	信号線
黒	GND
赤	3.3V
緑	I2C(SDA)
青	I2C(SCL)

I2C信号扱う際、ハードウェアとして「プルアップ抵抗」というものが必要になります。
しかし、「MPU-9250搭載モジュール」のボードの中で、SDAとSCLのそれぞれの信号に対し10kΩのプルアップ抵抗が実装されていますので、今回は不要となります。

I2CのSDAは「データ信号」、SCLは「クロック信号」を意味します。「データ信号」しか存在しないUARTやUSBシリアル信号と異なる点です。一方でプログラミングとしては「クロック信号」があるおかげで「ボーレート」のような設定が不要になります。
もう一つの特徴としてI2Cの「データ信号」は一方通行ではなく双方向である点です。UARTやUSBシリアル信号は送信データ信号と受信データ信号で物理的に別々です。I2Cのデータのやりとりは同時に行うことなく順番を決めて、送信と受信を交互に行っているため信号１本で通信が可能となっています。この辺はソフトウェアライブラリで制御を行っていますので、プログラミングを行う上では、特に気にする必要はありません。

ライブラリのインストール

DMPを使うためにArduinoにライブラリをインストールします。

まずはこちらのGitHubからzipファイルをダウンロードして下さい。

SparkFun_MPU-9250-DMP_Arduino_Library

zipファイルは展開せずそのままで大丈夫です。
Arduino IDEにて以下のメニューからダウンロードしたzipファイルを選びます。

スケッチ > ライブラリをインクルード > .ZIP形式のライブラリをインストール...

Arduino IDEにライブラリを反映させるために、一旦IDEを閉じてから再び起動してください。

プログラム書き込み

サンプルコードからMPU9250_DMP_Quaternionを選択します。

ファイル > スケッチ例 > SparkFun MPU-9250...省略 > MPU9250_DMP_Quaternion

前回と同じ手順でSeeeduino XIAOに書き込み、シリアルモニタを表示します。今回のボーレートは115200 bpsです。

このような表示結果が出れば成功です！
ブレッドボードを手に持って傾けてみて下さい。数値が変化すると思います。

クォータニオン

シリアルモニタに現れた文字列の以下２行に着目すると、１行目がクォータニオンで、２行目はオイラー角です。

Q: 0.9979, -0.0004, -0.0572, 0.0302
R/P/Y: 359.85, 13.11, 356.53

Qは4つの数値があり、q0, q1, q2, q3 と割り振られています。 RはRoll、PはPitch、YはYawを意味します。特にオイラー角は以下をイメージして回転してみると分かりやすいと思います。

画像引用元：Wikipedia

クォータニオンもオイラー角もどちらも３次元上での回転姿勢を表すものです。表現方法が異なるだけで、相互に変換することも可能です。

オイラー角のデメリットの１つとして、回転順番の考慮があります。
１軸の回転だけ着目している分には問題ないですが、３軸の回転を総合した回転に着目すると問題が生じます。例えば Roll > Pitch > Yaw の順番で回転させるのと、Roll > Yaw > Pitch の順番で回転させる場合とで結果が異なってしまうということです。

クォータニオンは直感的には分かりにくい値ですが、回転順番を考えなくて良いなど、制御を行う上ではオイラー角に対してメリットがあります。そこで今回は、オイラー角ではなく、クォータニオンをPC側へ渡して3D描画を行います。

今回は「Seeeduino XIAO」から「micro:bit」へUART送信を行います。

回路結線

今回使用する部品は以下の通りです。

Seeeduino XIAO（ピンヘッダはんだ付け済）
MPU-9250搭載モジュール（ピンヘッダはんだ付け済）
ミニブレッドボード
みの虫クリップ×ジャンパーワイヤ3本
ダイオード１本

※みの虫クリップ×ジャンパーワイヤは黒1本と赤2本を選びました。

まず、以下の画像のようにmicro:bit 1, 3V, GND の端子をみの虫クリップで挟みます。

さらに以下のように結線してください。
イラストでは「みの虫クリップ×ジャンパーワイヤ」の１本を白色で表現しています。

ジャンパー線	信号線
黒	GND
赤	3.3V
白	UART

実際の写真も載せておきます。

ダイオード部分をアップした写真です。

ダイオードは向きがありますのでご注意ください。よく見ると太い灰色の線が描かれています。太い灰色の線が入っている方向が「カソード」です。
また、ブレッドボードの挿入位置にもご注意ください。カソード側は一番端の端子に接続し、反対側は赤い線と同じ端子列に接続します。黒い線とは同じ端子列になっていないことも確認してください。

ダイオードの役割

ダイオードはseeeduinoの中のIC保護の目的で付けています。本来、seeeduinoの電源供給はUSB端子の5Vから行います。5VはSeeeduinoの中にあるレギュレータICによって3.3Vに降圧されてから回路全体へ行き渡ります。
しかし、今回のようにmicro:bitと一緒に使う場合は、micro:bit側から3.3V端子へ直接電源を供給してもらうという例外的な形を取っています。
そこで安全を考慮して下図のピンク色のように保護ダイオードを付けています。このダイオードの有無で通常時の回路動作的には全く影響はありません。無くても直ちに壊れるようなものでもありませんが、念のためを考えて保護しています。

画像引用元:Seeeduino-XIAO

保護ダイオードついての詳細が知りたい方は下記リンク先などを参照してください。
リニアレギュレータの逆電圧保護

seeeduino側のコード

USBケーブルはseeeduinoもしくはmicro:bitのどちらかだけに接続お願いします。片側の接続だけで、両方に電源が供給されます。両方から電源供給すると、電源回路的に良くないためです。今はseeeduinoに書き込むため、seeeduinoだけにUSBケーブルを接続してください。

int counter = 0;

void setup() {
  Serial1.begin(38400);
}

void loop() {
  Serial1.println(counter);
  delay(3000);
  counter++;
  if(counter >= 10){
    counter = 0;
  }
}

3秒間隔で変数counterの値を送信しています。counterは0からインクリメントし9まで到達したら再び0に戻しています。
前回は Serial だったのに対し、今回は Serial1 になっている点に注目してください。 Serial1と書いた場合はUART通信になります。

コード	役割
Serial	シリアル通信(USB)
Serial1	シリアル通信(UART)

今回ボーレートは 38400 bps としています。

micro:bit側のコード

今度はmicro:bitに書き込むため、micro:bitだけにUSBケーブルを接続してください。 MakeCodeで以下のコードを作成してください。シリアル通信を扱うためのブロックは「高度なブロック」の中にあります。

LED > その他 > 明るさを設定する > 5
基本 > アイコンを表示
シリアル通信 > シリアル通信(通信先を変更する, 送信端子, 受信端子, 通信速度) > 通信速度 ▼38400

基本 > 文字列を表示
シリアル通信 > シリアル通信 1行読み取る

UART送信側は使っていないため、「送信端子」のP0は気になくても大丈夫です。
今回はUART受信側を使っています。「受信端子」は 1 に回路接続しているため P1 のままとして下さい。ボーレートはseeeduinoに合わせて 38400 に変更します。

書き込みが終わると実行されます。

micro:bitのLEDに３秒おきに数値がカウントアップ表示されれば成功です！

※前回と異なり、今回はUSBシリアル通信は行っておりませんので、Arduino IDEのシリアルモニターには何も表示されませんのご注意ください。

※micro:bit V2の場合、数値と数値の間になぜか２点のドットが表示されます。原因は不明ですが、このプログラムは今回限りの動作確認ですので気にせず次に進みましょう。

ここでは一旦ハードウェアから離れて、PCのプログラミングに入ります。

立方体の表示

以下のHTMLファイルを作成して実行してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
  </head>
<body>
<canvas id="canvasMain"></canvas>
<script>

// ロード時の処理
window.onload = function () {
  threejs_run();
}

// three.js
const threejs_run = function () {
  //Canvas
  const canvas = document.querySelector('#canvasMain');
  const CANVAS_WIDTH = 640;
  const CANVAS_HEIGHT = 360;

  //レンダラー
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

  //シーン
  const scene = new THREE.Scene();

  //カメラ
  const camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH / CANVAS_HEIGHT, 0.1, 2000);
  camera.position.set(0, 0, 1200);

  //オブジェクト（立方体）
  const geometry = new THREE.BoxGeometry(500, 500, 500);
  const material = new THREE.MeshStandardMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  //光源
  const light = new THREE.DirectionalLight(0xffffff, 1); //color, intensity
  light.position.set(0, 0, 1);
  scene.add(light);

  //座標軸
  const axes = new THREE.AxesHelper(2000);
  scene.add(axes);

  //レンダリング
  renderer.render(scene, camera);
}

</script>
</body>
</html>

このような表示結果が出ればOKです。
立方体を描画していますが、真正面から見ているため２次元図形っぽく見えています。

解説

Webプログラミングで3D描画を行うときに使うのがWebGLです。WebGLは学習コストが高いため、簡単に扱えるようにしたのがThree.jsというライブラリになります。
Three.jsはダウンロードして使うこともできますし、CDNで提供されているURLを使うこともできます。今回は以下のコードで示すようにCDNを活用しています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>

HTMLで図形等を描画する際に必要になるのがCanvasで、今回は640x360のCanvasを設定しています。

three.jsでほぼ必須と言っても過言ではない要素は以下５つです。
はじめての方は良く分からないと思いますが、three.jsにはこれらを必ず実行しなければいけないお作法があると軽く捉えて下さい。

レンダラー
シーン
カメラ
オブジェクト
光源

1 : レンダラーはシーンとカメラの上に位置するthree.jsのメイン部分です。Canvasを設定します。
2 : シーンは、オブジェクトや光源、座標軸などを置く場所です。
3 : カメラは視点となる重要な要素で、結構ハマるポイントなので、別途説明します。
4 : オブジェクトは主役となる物体です。今回は緑色の立方体を作成しました。オブジェクトはシーンに追加します。
5 : 光源はオブジェクトに当てるライトです。光の向きや強さなど設定可能です。光源もシーンに追加します。

さらに今回は「座標軸」もシーンに追加していますが、これはあっても無くてもOKです。カメラの位置や角度を変更した場合にあると便利です。赤がX軸、緑がY軸、青がZ軸です。Z軸が見えないのは真正面にいるためです。

これら6個の設定が終わったら最後にrenderer.render(scene, camera)でレンダリングしてthree.jsの描画が完成します。

カメラについて

カメラを３次元座標のどこに置くか、どの角度にするかによって見え方が変わります。
カメラの設定によってはオブジェクトが全く見えなくなったりします。

  //カメラ
  const camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH / CANVAS_HEIGHT, 0.1, 2000);
  camera.position.set(0, 0, 1200);

PerspectiveCameraの第一引数はFOV（視野角）の設定です。現在は50°という意味です。少し値を変えてみてください。
第二引数はアスペクト比の設定です。基本的にこのままが良いでしょう。
第三引数と第四引数は、どこからどこまでをカメラに映すかの設定です。現在はカメラから0.1～2000の範囲だけ描画するという意味で、この範囲から外れるオブジェクトは見えなくなるので注意してください。ここはカメラの位置とオブジェクトの大きさによって影響を受けます。

position.setでカメラをどこに置くかを設定しています。今回は原点から正のZ軸方向に1200移動した位置です。被写体から1200ほど後ろに下がった位置と捉えると良いと思います。ちなみにオブジェクトの内部にカメラ位置を設定すると何も見えなくなります。

カメラのハマりどころとして、カメラの座標位置を変えただけではカメラの向きが変わらない点です。今回のように正のZ軸方向のみ移動の場合は、カメラの向きと一致しているため、値を大きくしても見失うことはありません。例えばx軸方向に値を設定すると、カメラが向きを変えずに真横に移動するため、値を大きくするとすぐに見失います。色々設定を試してみて、感覚を掴んでみるのが良いでしょう。原点方向にカメラを向けるメソッドもありますが、最初から使うと余計に分かりにくくなるので、まずは移動だけで試してみて下さい。

立方体のアニメーション

以下のHTMLファイルを作成して実行してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
  </head>
<body>
<canvas id="canvasMain"></canvas>
<script>

// ロード時の処理
window.onload = function () {
  threejs_run();
}

// three.js
const threejs_run = function () {
  //Canvas
  const canvas = document.querySelector('#canvasMain');
  const CANVAS_WIDTH = 640;
  const CANVAS_HEIGHT = 360;

  //レンダラー
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

  //シーン
  const scene = new THREE.Scene();

  //カメラ
  const camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH / CANVAS_HEIGHT, 0.1, 2000);
  camera.position.set(0, 0, 1200);

  //オブジェクト（立方体）
  const geometry = new THREE.BoxGeometry(500, 500, 500);
  const material = new THREE.MeshStandardMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  //光源
  const light = new THREE.DirectionalLight(0xffffff, 1); //color, intensity
  light.position.set(0, 0, 1);
  scene.add(light);

  //座標軸
  const axes = new THREE.AxesHelper(2000);
  scene.add(axes);

  //Animation
  const animate = function () {
    requestAnimationFrame(animate);

    //立方体の回転
    cube.rotation.x += 0.005;
    cube.rotation.y += 0.01;

    //レンダリング
    renderer.render(scene, camera);
  }

  animate();

}

</script>
</body>
</html>

このように立方体がアニメーションされれば成功です！

変化点は最後の部分のみです。先程は1フレーム描画して終了でしたが、このようにrequestAnimationFrameを使うことにより、時間ごとに変化するフレームを連続で描画させることができます。
今回はオブジェクトにrotationで少しずつ回転を行っています。

  //Animation
  const animate = function () {
    requestAnimationFrame(animate);

    //立方体の回転
    cube.rotation.x += 0.005;
    cube.rotation.y += 0.01;

    //レンダリング
    renderer.render(scene, camera);
  }

  animate();

three.jsでのクォータニオン

three.jsでのクォータニオンは以下のコードなどで簡単に適用することができます。

quaternion.set(x, y, z, w)

気を付ける点として、q0 は w、 q1 は x、 q2 は y、 q3 は z なので、Seeeduinoから出力されるクォータニオン (q0, q1, q2, q3) は (q1, q2, q3, q0) に並び替える必要があるということです。

その他の詳細はこちらを参照してください。
threejs.org docs Quaternion

既存データで回転

クォータニオンを記録したデータをJSON形式で quaternion_data として用意し、一定時間毎に順にループして読み込むコードを作りました。以下のHTMLファイルを作成して実行してください。

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/101/three.min.js"></script>
  </head>
<body>
<canvas id="canvasMain"></canvas>
<script>

//quaternion
let data_q0 = 0;
let data_q1 = 0;
let data_q2 = 0;
let data_q3 = 0;

//クォータニオンデータ
const quaternion_data = [
  {"q0":0.996, "q1":0.007, "q2":-0.030, "q3":-0.080},
  {"q0":0.996, "q1":0.007, "q2":-0.030, "q3":-0.081},
  {"q0":0.996, "q1":0.005, "q2":-0.030, "q3":-0.082},
  {"q0":0.996, "q1":0.010, "q2":-0.026, "q3":-0.084},
  {"q0":0.996, "q1":0.037, "q2":-0.006, "q3":-0.085},
  {"q0":0.991, "q1":0.079, "q2":0.043, "q3":-0.095},
  {"q0":0.978, "q1":0.109, "q2":0.129, "q3":-0.124},
  {"q0":0.953, "q1":0.142, "q2":0.226, "q3":-0.146},
  {"q0":0.924, "q1":0.161, "q2":0.306, "q3":-0.163},
  {"q0":0.894, "q1":0.178, "q2":0.373, "q3":-0.171},
  {"q0":0.858, "q1":0.200, "q2":0.440, "q3":-0.176},
  {"q0":0.821, "q1":0.219, "q2":0.496, "q3":-0.180},
  {"q0":0.786, "q1":0.237, "q2":0.543, "q3":-0.179},
  {"q0":0.753, "q1":0.249, "q2":0.582, "q3":-0.179},
  {"q0":0.721, "q1":0.255, "q2":0.618, "q3":-0.183},
  {"q0":0.691, "q1":0.259, "q2":0.649, "q3":-0.185},
  {"q0":0.658, "q1":0.271, "q2":0.676, "q3":-0.191},
  {"q0":0.633, "q1":0.286, "q2":0.692, "q3":-0.195},
  {"q0":0.646, "q1":0.283, "q2":0.680, "q3":-0.200},
  {"q0":0.699, "q1":0.267, "q2":0.632, "q3":-0.202},
  {"q0":0.765, "q1":0.238, "q2":0.565, "q3":-0.197},
  {"q0":0.836, "q1":0.208, "q2":0.473, "q3":-0.182},
  {"q0":0.907, "q1":0.160, "q2":0.355, "q3":-0.159},
  {"q0":0.961, "q1":0.096, "q2":0.226, "q3":-0.131},
  {"q0":0.989, "q1":0.027, "q2":0.098, "q3":-0.108},
  {"q0":0.994, "q1":-0.043, "q2":0.001, "q3":-0.099},
  {"q0":0.985, "q1":-0.120, "q2":-0.086, "q3":-0.087},
  {"q0":0.961, "q1":-0.201, "q2":-0.169, "q3":-0.080},
  {"q0":0.937, "q1":-0.247, "q2":-0.235, "q3":-0.079},
  {"q0":0.910, "q1":-0.282, "q2":-0.292, "q3":-0.078},
  {"q0":0.880, "q1":-0.325, "q2":-0.338, "q3":-0.077},
  {"q0":0.882, "q1":-0.321, "q2":-0.337, "q3":-0.078},
  {"q0":0.912, "q1":-0.273, "q2":-0.297, "q3":-0.080},
  {"q0":0.941, "q1":-0.212, "q2":-0.251, "q3":-0.078},
  {"q0":0.971, "q1":-0.099, "q2":-0.203, "q3":-0.079},
  {"q0":0.983, "q1":0.016, "q2":-0.168, "q3":-0.069},
  {"q0":0.979, "q1":0.134, "q2":-0.137, "q3":-0.062},
  {"q0":0.962, "q1":0.245, "q2":-0.104, "q3":-0.058},
  {"q0":0.934, "q1":0.345, "q2":-0.074, "q3":-0.049},
  {"q0":0.892, "q1":0.448, "q2":-0.044, "q3":-0.045},
  {"q0":0.833, "q1":0.551, "q2":-0.015, "q3":-0.041},
  {"q0":0.773, "q1":0.633, "q2":0.001, "q3":-0.045},
  {"q0":0.712, "q1":0.700, "q2":0.013, "q3":-0.058},
  {"q0":0.625, "q1":0.776, "q2":0.031, "q3":-0.075},
  {"q0":0.548, "q1":0.831, "q2":0.043, "q3":-0.092},
  {"q0":0.520, "q1":0.847, "q2":0.051, "q3":-0.096},
  {"q0":0.564, "q1":0.819, "q2":0.056, "q3":-0.088},
  {"q0":0.712, "q1":0.695, "q2":0.056, "q3":-0.077},
  {"q0":0.875, "q1":0.475, "q2":0.064, "q3":-0.062},
  {"q0":0.954, "q1":0.285, "q2":0.075, "q3":-0.058},
  {"q0":0.986, "q1":0.128, "q2":0.090, "q3":-0.060},
  {"q0":0.992, "q1":-0.011, "q2":0.107, "q3":-0.059},
  {"q0":0.981, "q1":-0.140, "q2":0.119, "q3":-0.059},
  {"q0":0.957, "q1":-0.259, "q2":0.118, "q3":-0.059},
  {"q0":0.919, "q1":-0.372, "q2":0.118, "q3":-0.053},
  {"q0":0.860, "q1":-0.494, "q2":0.122, "q3":-0.048},
  {"q0":0.801, "q1":-0.583, "q2":0.129, "q3":-0.048},
  {"q0":0.747, "q1":-0.649, "q2":0.134, "q3":-0.048},
  {"q0":0.710, "q1":-0.688, "q2":0.140, "q3":-0.046},
  {"q0":0.677, "q1":-0.720, "q2":0.146, "q3":-0.047},
  {"q0":0.647, "q1":-0.745, "q2":0.154, "q3":-0.045},
  {"q0":0.658, "q1":-0.736, "q2":0.151, "q3":-0.048},
  {"q0":0.718, "q1":-0.678, "q2":0.152, "q3":-0.047},
  {"q0":0.787, "q1":-0.596, "q2":0.150, "q3":-0.051},
  {"q0":0.875, "q1":-0.456, "q2":0.150, "q3":-0.055},
  {"q0":0.940, "q1":-0.299, "q2":0.154, "q3":-0.052},
  {"q0":0.974, "q1":-0.156, "q2":0.156, "q3":-0.054},
  {"q0":0.985, "q1":-0.027, "q2":0.161, "q3":-0.050},
  {"q0":0.969, "q1":0.174, "q2":0.171, "q3":-0.050},
  {"q0":0.899, "q1":0.402, "q2":0.167, "q3":-0.057},
  {"q0":0.771, "q1":0.614, "q2":0.156, "q3":-0.072},
  {"q0":0.684, "q1":0.710, "q2":0.153, "q3":-0.072},
  {"q0":0.640, "q1":0.751, "q2":0.148, "q3":-0.076},
  {"q0":0.622, "q1":0.766, "q2":0.143, "q3":-0.077},
  {"q0":0.652, "q1":0.741, "q2":0.139, "q3":-0.078},
  {"q0":0.706, "q1":0.689, "q2":0.143, "q3":-0.084},
  {"q0":0.825, "q1":0.544, "q2":0.140, "q3":-0.070},
  {"q0":0.958, "q1":0.241, "q2":0.144, "q3":-0.053},
  {"q0":0.990, "q1":0.057, "q2":0.117, "q3":-0.048},
  {"q0":0.993, "q1":0.061, "q2":0.083, "q3":-0.054},
  {"q0":0.998, "q1":0.014, "q2":0.006, "q3":-0.065},
  {"q0":0.997, "q1":0.013, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.013, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.013, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.012, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.012, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.012, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.011, "q2":0.006, "q3":-0.072},
  {"q0":0.997, "q1":0.011, "q2":0.005, "q3":-0.072},
  {"q0":0.997, "q1":0.011, "q2":0.005, "q3":-0.072},
  {"q0":0.997, "q1":0.011, "q2":0.005, "q3":-0.072},
  {"q0":0.997, "q1":0.011, "q2":0.005, "q3":-0.072},
  {"q0":0.997, "q1":0.010, "q2":0.005, "q3":-0.072},

];

//クォータニオンデータのインデックス
let quaternion_data_counter = 0;

//クォータニオンデータをタイマー読み込み
const change_quaternion_data = function () {
  //データ更新
  data_q0 = quaternion_data[quaternion_data_counter].q0;
  data_q1 = quaternion_data[quaternion_data_counter].q1;
  data_q2 = quaternion_data[quaternion_data_counter].q2;
  data_q3 = quaternion_data[quaternion_data_counter].q3;

  //カウンターアップ
  quaternion_data_counter++;
  if(quaternion_data_counter >= quaternion_data.length){
    quaternion_data_counter = 0;
  }

  setTimeout(change_quaternion_data, 100);
}


// ロード時の処理
window.onload = function () {
  threejs_run();
  change_quaternion_data();
}

// three.js
const threejs_run = function () {
  //Canvas
  const canvas = document.querySelector('#canvasMain');
  const CANVAS_WIDTH = 640;
  const CANVAS_HEIGHT = 360;

  //レンダラー
  const renderer = new THREE.WebGLRenderer({canvas});
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(CANVAS_WIDTH, CANVAS_HEIGHT);

  //シーン
  const scene = new THREE.Scene();

  //カメラ
  const camera = new THREE.PerspectiveCamera(50, CANVAS_WIDTH / CANVAS_HEIGHT, 0.1, 2000);
  camera.position.set(0, 0, 1200);

  //オブジェクト（立方体）
  const geometry = new THREE.BoxGeometry(500, 500, 500);
  const material = new THREE.MeshStandardMaterial({color: 0x00ff00});
  const cube = new THREE.Mesh(geometry, material);
  scene.add(cube);

  //光源
  const light = new THREE.DirectionalLight(0xffffff, 1); //color, intensity
  light.position.set(0, 0, 1);
  scene.add(light);

  //座標軸
  const axes = new THREE.AxesHelper(2000);
  scene.add(axes);

  //Animation
  const animate = function () {
    requestAnimationFrame(animate);

    //クォータニオンで回転
    cube.quaternion.set(data_q1, data_q2, data_q3, data_q0);

    //レンダリング
    renderer.render(scene, camera);
  }

  animate();

}

</script>
</body>
</html>

このように立方体がアニメーションされると思います。

クォータニオンデータを記録する

先程はこちらで用意したデータでしたが、皆さんが9軸センサーを動かしてデータを作成してみましょう。

回路は、以前行った「I2C通信でDMP」の接続が必要です。micro:bitとの接続があっても問題ありませんが、USBコネクタを挿す際はseeeduinoもしくはmicro:bitのどちらかだけにしてください（電源が競合するため）

※「I2C通信でDMP」の回路と同じです。

seeeduino XIAOに以下のコードを書きこんで下さい。
「I2C通信でDMP」でのコードをベースに「Seeeduino XIAO」の内容を適用し、クォータニオンデータをUSBシリアルで出力するように改造しました。

/************************************************************
MPU9250_DMP_Quaternion
 Quaternion example for MPU-9250 DMP Arduino Library 
Jim Lindblom @ SparkFun Electronics
original creation date: November 23, 2016
https://github.com/sparkfun/SparkFun_MPU9250_DMP_Arduino_Library

The MPU-9250's digital motion processor (DMP) can calculate
four unit quaternions, which can be used to represent the
rotation of an object.

This exmaple demonstrates how to configure the DMP to 
calculate quaternions, and prints them out to the serial
monitor. It also calculates pitch, roll, and yaw from those
values.

Development environment specifics:
Arduino IDE 1.6.12
SparkFun 9DoF Razor IMU M0

Supported Platforms:
- ATSAMD21 (Arduino Zero, SparkFun SAMD21 Breakouts)
*************************************************************/
#include <SparkFunMPU9250-DMP.h>

MPU9250_DMP imu;

void setup() 
{
  Serial.begin(9600);

  // Call imu.begin() to verify communication and initialize
  if (imu.begin() != INV_SUCCESS)
  {
    while (1)
    {
      Serial.println("Unable to communicate with MPU-9250");
      Serial.println("Check connections, and try again.");
      Serial.println();
      delay(5000);
    }
  }
  
  imu.dmpBegin(DMP_FEATURE_6X_LP_QUAT | // Enable 6-axis quat
               DMP_FEATURE_GYRO_CAL, // Use gyro calibration
              10); // Set DMP FIFO rate to 10 Hz
  // DMP_FEATURE_LP_QUAT can also be used. It uses the 
  // accelerometer in low-power mode to estimate quat's.
  // DMP_FEATURE_LP_QUAT and 6X_LP_QUAT are mutually exclusive
}

void loop() 
{
  // Check for new data in the FIFO
  if ( imu.fifoAvailable() )
  {
    // Use dmpUpdateFifo to update the ax, gx, mx, etc. values
    if ( imu.dmpUpdateFifo() == INV_SUCCESS)
    {
      // computeEulerAngles can be used -- after updating the
      // quaternion values -- to estimate roll, pitch, and yaw
      imu.computeEulerAngles();
      printIMUData();
    }
  }
}

void printIMUData(void)
{  
  // After calling dmpUpdateFifo() the ax, gx, mx, etc. values
  // are all updated.
  // Quaternion values are, by default, stored in Q30 long
  // format. calcQuat turns them into a float between -1 and 1
  float q0 = imu.calcQuat(imu.qw);
  float q1 = imu.calcQuat(imu.qx);
  float q2 = imu.calcQuat(imu.qy);
  float q3 = imu.calcQuat(imu.qz);

  char format_str[100];
  sprintf(format_str, "{\"q0\":%1.3f, \"q1\":%1.3f, \"q2\":%1.3f, \"q3\":%1.3f},", q0, q1, q2, q3);
  
  Serial.println(format_str);
  delay(50); 
}

書き込み成功したらシリアルコンソールを開いて下さい。ボーレートは9600 bpsです。 JSON形式でクォータニオンを出力しています。

ブレッドボードを回転させて値を変化させ、適当な所で「自動スクロール」のチェックを外し、任意の複数データ行をコピーして、先程のHTMLファイルの quaternion_data の [ ] の中身を上書きして実行してみて下さい。向きや速さは置いておくとして、動かした通りにthree.js上で表示されたと思います。

Seeeduinoコードのポイント

sprintf を使って指定の形式にフォーマットしている点に注目してください。

 char format_str[100];
 sprintf(format_str, "{\"q0\":%1.3f, \"q1\":%1.3f, \"q2\":%1.3f, \"q3\":%1.3f},", q0, q1, q2, q3);

小数の場合は%fですが、整数の場合は%dを使います。また %02d 等を使うとゼロ埋め表現も可能です。
ちなみに上記のコードの\はエスケープシーケンス、%1.3fは整数一桁.小数3桁という意味です。詳しくは各自調べてください。

はじめに

Webプログラミングの場合はJSON形式などでやりとりしますが、BLEやハードウェアのシリアル通信において、JSON形式のようなプログラミングしやすい形にしてしまうとバイト数が増えてしまい、省電力やデータ転送速度に大きく影響が出ます。できるだけ余計な情報は付加せず、かつ圧縮された小さいデータで送信することを目指します。

BLEデータバイト数について

BLEは通常設定だと、一度に設定できるデータ数は20Byteです。
ですが、micro:bitにてUART受信してそれをBLE UART送信する場合、18Byteを超えていると経験上うまく送信できませんでした。これを鑑みて、クォータニオンのデータをseeeduinoから送信する場合、18Byte以下に抑えてた方が良さそうです。

もちろん、小分けに送信を分けて送ることも可能ですが、処理が複雑になるため、1度に1セットのクォータニオンデータを送信することを目標とします。

クォータニオンデータの小数点以下桁数について

改めて「I2C通信でDMP」のサンプルコードで出力したSeeeduinoのクォータニオンデータを見てみると、以下のような小数の値です。

Q: 0.9979, -0.0004, -0.0572, 0.0302

それぞれの値は最小 -1.0000 ～最大 +1.0000 までの範囲です。これも経験上ですが、小数点以下の桁数が少ないと、動きの滑らかさが不足してしまいます。今回は小数点以下3桁以上を目標とします。

データ送信フォーマットについて

先程のSeeeduinoのクォータニオンデータから、Q: や , やスペースを取り除き、必ず数値の前に+ -符号を付けるようにすると以下のようになります。

+0.9979-0.0004-0.0572+0.0302

これだと28Byteで大分オーバーしています。小数点以下3桁にしてみます。

+0.997-0.000-0.057+0.030

これでようやく24Byteですが、まだまだ目標をオーバーしています。

エンコード（符号化）

データをエンコードしてサイズを小さくする方法は様々方法がありますが、ここでは簡単に計算できる方法を考えてみます。

`+` `-` 記号を無くす

単純に記号を取り除いてしまうと元通りに復号化できないためNGです。
もう一度先程のクォータニオンデータの最小値～最大値を考えてみてください。
1を足すことで必ず数値は正の数となります。

+1.997+1.000+9.943+1.030

必ず + が付くのであれば送信時は取ってしまっても良さそうです。

小数点を無くす

単純に文字列操作して小数点を消すというやり方でも良いですが、もっと簡単な方法があります。それは1000を掛けるということです。この方がプログラミング的にも簡単に記述できます。

1997100099431030

これで小数点以下3桁を保ちつつ、16Byeにすることが出来ました！

デコード（復号化）

デコードするのはPC側のHTML/JavaScriptです。
エンコードと逆の計算を行うことで簡単にデコードできます。ただし、デコードする前にsubstr等を使って、16文字を4文字ずつ切り出すと良いでしょう。

中間演習

これまで上級コースで学んだ全ての内容、micro:bitのBLE通信を統合して、9軸センサ搭載のブレッドボードを回転させると、HTML上の立方体がリアルタイムに回転するシステムを作成してください。

補足

現物の回転方向とthree.jsの回転方向が一致していない感じがしても、現時点では気にしなくて良い。

解答

簡単なアンケートに答えて解答例を入手しよう！
解答を見る前に自分で作って悩むことがプログラミング向上に繋がります。

完全版

前回の演習で実物と立方体の回転方向が一致していない人が多かったと思います。それは、上から見るのか、下から見るのかなど、どの視点から見るかによって見え方が変わるためです。
今回はリアル視点とthree.jsのカメラ視点を合わせて、回転方向を気持ちよく一致させます！

完全版

今回はオブジェクトとして球を描き、そこに地球のテクスチャをマッピングして回転表示します。

完全版

今回は円柱の描画がとオブジェクトのグループ化について学びます。
PCだけで実行できます。

完全版

１つのオブジェクトだけ選択して黄色に着色します。

完全版

three.jsでテキストを描画することはできますが少し複雑です。
今回はより簡単な方法でテキスト描画を実現させます。

完全版

最終的に画面に表示するものとして地球の画像だけでなく、各種情報も表示させます。
そのときに使えるデータを用意しました。

完全版

球面との計算の参考になる情報を載せています。
総合演習時のヒントとして下さい。

完全版

ここでは「ブレッドボード（9軸センサ+Seeeduino）」と「micro:bit」を球の中に納める手順を説明します。

完全版

総合演習

これまで学んだ内容を組合せて、動画のようにプラスチックボールを回転すると同じようにPC画面上でバーチャル地球が回転し、場所に応じて各国の情報が表示されるシステムを完成させてください。

※動画で使っているデバイスや組み立ては少し古いため、球の中は気にしないでください。

完全版

「ものものテックQA掲示板」と「コンテンツの変更履歴」です。

完全版

学べること

部品購入

必要なスキル

必要な部品

必要な工具

ポイント

全体システム

MPU-9250搭載モジュール

Seeeduino XIAO

micro:bit

PC

はんだ付け

Seeeduino開発環境準備

Arduno IDEインストール

Arduino IDE環境設定

プログラムの書き込み

USBシリアル出力

書き込みエラーになる場合

はんだ付け

回路結線

ライブラリのインストール

プログラム書き込み

クォータニオン

回路結線

ダイオードの役割

seeeduino側のコード

micro:bit側のコード

立方体の表示

解説

カメラについて

立方体のアニメーション

three.jsでのクォータニオン

既存データで回転

クォータニオンデータを記録する

Seeeduinoコードのポイント

はじめに

BLEデータバイト数について

クォータニオンデータの小数点以下桁数について

データ送信フォーマットについて

エンコード（符号化）

+ - 記号を無くす

小数点を無くす

デコード（復号化）

中間演習

解答

総合演習

`+` `-` 記号を無くす