[交流] 万博网页版登陆页派之三轴加速度计来控制web页面上的飞机姿态（转）

用加速度计通过webgl来控制页面上的3D飞机的姿态，下面两个图是最终效果示意图，手里的芯片摆动的时候，飞机会跟着摆动：


下面讲一下开发的过程，希望对此有兴趣的人一起来探讨。

需要的元器件：

万博网页版登陆页派（我用的是2B版本，其他版本应该也可以），以及万博网页版登陆页派运行的必备硬件：TF卡、USB WIFI等
ADXL345芯片（某宝上有很多，可以自己买；如果你没有电平转换器，需要买3.3V版本的，否则可能带不起来）
杜邦线若干
优质5V电源一个（我用的是IPAD的充电器；电源一定要用好的，否则万博网页版登陆页派可能工作不稳定）
一台电脑。

用到的开发语言和工具等：

python    （adxl345的驱动）
nodejs    （用于搭建httpserver 及 websocketserver，如果对nodejs不熟悉，可以换你熟悉的服务器端语言）
javascript（用于web页面上调用three.js绘图）
webgl（我本身不会用webgl，采用了第三方库：three.js）
3D图形构建工具（maya之类的）
web开发IDE（推荐用webstorm）

需要的技能和知识：

一定的硬件知识。如果你有嵌入式软件的开发经验，可能会找到更好的驱动、更好的传感器、更快的代码
B/S软件开发经验，能自己搭建httpserver 及 websocketserver，能调试浏览器端代码
webgl相关的知识（我的知识基本是0，我的代码是从three.js的demo代码改过来的）；3D绘图的相关知识。
数学知识（目前我做出来的东西姿态是不准的，因为我不太会算角度）
能折腾。会用google搜索并阅读英文文档。这方面老外写的东西比较多。另外官方的文档有的不是最新的，比如示例代码中仍然在使用已经过期的代码，你要有能力自己把它改过来。

步骤：

1、保证你的万博网页版登陆页派能正常运行RASPBIAN系统，并能够用ssh等工具上传代码、执行命令


2、万博网页版登陆页派的I2C端口默认是关闭的，需要先开启I2C端口。已经有教程：http://www.cnblogs.com/hangxin19 ... /04/02/2997077.html

此处需要注意一下，执行

sudo i2cdetect -y 1
之后你可能会看到一个UU，我查了下好像是被板载声卡芯片占用了，不用管它。

3、安装ADXL345。已经有教程：http://www.netfoucs.com/article/u011708919/77187.html


4、安装ADXL345驱动。我用的是github上写的一个，地址：

https://github.com/pimoroni/adxl345-python

如果你用python的驱动，需要先安装python（最新的raspbian系统中已经自带了python，不需要再安装）。此外如果使用这个驱动需要安装smbus。

如果执行：

sudo python ADXL345.py
之后能正常输出xyz轴的信息，就表示原件已经安装好了。


5、安装nodejs。具体过程网上搜。如果你熟悉其他的服务器端语言，也可以用其他的语言（比如JAVA）。

然后用nodejs写个测试文件来调用python驱动程序。如果不会用，请度娘搜索“nodejs调用python”。


上面的东西做好了之后，就能够在万博网页版登陆页派上调用ADXL345来获取姿态信息了。下面是WEB开发的过程。


6、搭建HTTPserver，添加一个页面，在页面上添加你使用顺手的库（比如jquery）。把server部署在万博网页版登陆页派上，保证访问正常。


7、搭建WEBSOCKETserver（不会的话自己搜），在server中调用python循环获取传感器姿态，组装成JSON格式，发送至客户端。保证你在客户端能不间断地获取这些数据。（如果全程都照着我写的步骤来做，最后的采样率大概会在每秒3次左右）。


上面的步骤做完之后就服务器端的程序就全部做完了。

下面是编写客户端代码，以及3D模型制作。这块是比较麻烦的，我目前也没完全做好。


8、要绘图，你需要对webgl有一定了解，我依赖了three.js。如果你在这方面没有知识，我建议参考：

http://www.hewebgl.com/

看完这个网站上的初级教程之后你会对webgl有个大概的了解。如果你对这块知识感兴趣，可以买他们的中高级教程。

然后你可以到https://github.com/mrdoob/three.js/

上面有three.js的demo和源代码。你可以先摸索下。每个文件夹都翻翻看，会找到很多有意思的东西（比如editor）
代码调试最好在chrome浏览器上进行，性能会比其他的浏览器好。

9、找一个3D模型文件。我找了一个.obj格式的SU_27战斗机的模型图。如果你会3D绘图，你也可以自己画一个。

3D的文件有很多种格式，.obj仿佛是比较通用的一种。

然后如果对three.js不熟悉的话，就到了要折腾的时候了：

需要把3D文件转换成three.js 可以识别的文件格式。我试了很多种，最终是到demo里面找了一个ctm格式的例子，改了一下。原来的页面是这样的（目录：examples/webgl_loader_ctm.html）：



它需要的是ctm格式的文件，那么现在需要把obj转换成ctm。google一下能找到一个叫OPENCTM的软件，可以把obj export 为 ctm。然后用生成的CTM文件替换掉上图中面具的文件（loader.load( "models/ctm/WaltHead.ctm",  function( geometry ) {}）。然后就能看到飞机了。


但是现在飞机是不能动的，我们要让他动。这块我们仍然要先看页面的代码。最后定位到控制模型姿态的代码主要是这块：

                mesh.position.set( x, y, z );
                mesh.scale.set( s, s, s );
                mesh.rotation.x = rx;
                mesh.rotation.z = ry;

写个function把这块的rotation跟前面用websocket传过来的数据结合起来就好了。这里涉及到另一个问题，就是怎样把陀螺仪的xyz转换为3D模型的xyz？因为我数学没学好，这块暂时没做好，所以飞机的姿态控制其实是不准确的。如果大家有什么好建议，欢迎一起探讨。

mark慢慢看