查看: 1956|回复: 1
收起左侧

[交流] 树莓派之三轴加速度计来控制web页面上的飞机姿态(转)

2015-5-29 15:41:13 | 显示全部楼层 |阅读模式
用加速度计通过webgl来控制页面上的3D飞机的姿态,下面两个图是最终效果示意图,手里的芯片摆动的时候,飞机会跟着摆动:
20150316152213089.jpg
20150316152235163.jpg
下面讲一下开发的过程,希望对此有兴趣的人一起来探讨。

需要的元器件:

树莓派(我用的是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?因为我数学没学好,这块暂时没做好,所以飞机的姿态控制其实是不准确的。如果大家有什么好建议,欢迎一起探讨。
回复

使用道具 举报

2015-6-24 15:28:02 | 显示全部楼层
mark慢慢看
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关注我们,了解更多

官方微信

服务时间:10:00-16:00

13714503811

公司地址:深圳市龙岗区南湾街道东门头路8号

Copyright © 2012-2020 Powered by 树莓派论坛 2019.4  粤ICP备15075382号-1
快速回复 返回列表 返回顶部