|
|
用加速度计通过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？因为我数学没学好，这块暂时没做好，所以飞机的姿态控制其实是不准确的。如果大家有什么好建议，欢迎一起探讨。 |
|
