使用Micro:bit配合网页蓝牙等前端技术实现姿态检测以及复现。(WebBluetooth、Three.js)
Three.js库介绍
Three.js在Wikipedia中的概述如下：
Three.js是一个跨浏览器的脚本，使用JavaScript函数库或API来在网页浏览器中创建和展示动画的三维计算机图形。Three.js使用WebGL。源代码托管在GitHub。
该JavaScript前端库使用WebGL，将其封装成一系列用于创建或展示三维图形的API。
在本文中我们将使用该库来实现3D模型相关的操作。
Three.js的官方网站>>直达链接<<
关于WebBluetooth
WebBlueTooth项目意在制定一组Web蓝牙API规范，使得人们在浏览器上就能够访问自己的蓝牙设备。目前该项目在Chrome浏览器上以及可以使用部分API，本文将基于这部分API来实现浏览器于Micro:Bit通过蓝牙进行通信。
更多关于WebBluetooth的信息可参见博文：
实现原理
姿态角(欧拉角)
关于姿态角或称欧拉角，在Wikipedia上的概述如下：
莱昂哈德·欧拉用欧拉角来描述刚体在三维欧几里得空间的取向。对于任何参考系，一个刚体的取向，是依照顺序，从这参考系，做三个欧拉角的旋转而设定的。所以，刚体的取向可以用三个基本旋转矩阵来决定。换句话说，任何关于刚体旋转的旋转矩阵是由三个基本旋转矩阵复合而成的。
对于欧拉角在Wikipedia上有“动态的定义”与“静态的定义”在本文中使用其“静态的定义”即：
对于在三维空间里的一个参考系，任何坐标系的取向，都可以用三个欧拉角来表现。参考系又称为实验室参考系，是静止不动的。而坐标系则固定于刚体，随着刚体的旋转而旋转。
关于欧拉角更加详细的描述请参见：>>简书：欧拉角的说明<<
三轴加速度传感器
加速度传感器有很多种，本文所使用的Micro:Bit上所使用的加速度传感器为三轴加速度传感器，能从三个方向去测量加速度值。
目前的加速度传感器有多种实现方式，主要可分为压电式、电容式及热感应式三种，按输入轴数目分类，有单轴、双轴和三轴加速度计。
关于Micro:Bit的加速度传感器介绍如下图：
- 当Micro:Bit水平时，其加速度传感器的Z轴值（负）等于重力加速度G
- 当Micro:Bit左倾时，其加速度传感器的Z轴值（负）与X轴值（负）的平方和开根号等于重力加速度G
- 当Micro:Bit向其它方向偏转时依此类推
程序结构
蓝牙部分
- 使用WebBluetooth API让用户选择要连接到的蓝牙设备
- 通过Micro:Bit的设备名称服务读取设备名称
- 启用Micro:Bit的加速度计服务的通知
3D部分
- 使用Three.js的API读取在本地预先准备好的3D模型
- 初始化3D模型以及相机的位置
- 由根据处理后的加速度值即欧拉角改变3D模型的姿态
其它
- 实现加速度值转换为欧拉角
- 对加速度值的滤波
核心代码
加速度值滤波器
加速度传感器噪声过多在宏观静止的情况下其值会存在抖动，因此需要使用滤波器滤除抖动。在这里使用的是高通滤波器。
//滤除抖动 x,y为传感器的值 exp为滤波阈值 old_X..Y为上一次传感器的值
function AFilter_Output(x, y, exp) {
x = (Math.abs(Math.abs(old_X) - Math.abs(x)) < exp) ? old_X : x;
y = (Math.abs(Math.abs(old_Y) - Math.abs(y)) < exp) ? old_Y : y;
ChangeModel(x, y);
old_X = x;
old_Y = y;
}加速度值转欧拉角
在这里直接把加速度值转欧拉角并修改3D模型的姿态
function ChangeModel(x, y) {
obj.rotation.y = (x / 1000) * (Math.PI/2);
obj.rotation.x = (y / 1000) * (Math.PI/2);
}结语
完整Demo
Github项目地址>>直达链接<<
一些问题
实际上对于加速度传感器用于检测姿态角实际上会存在许多问题，毕竟加速度传感器终究还是用来测量加速度值的，当加速度传感器在做变速运动时，基本上无法计算姿态角，因此如果要在实际的项目中检测姿态角最好还是使用陀螺仪传感器。