前言
我之前有篇文章写了利用deviceorientation事件获取手机姿态。既然可以获取手机在三位空间内的与坐标轴角度,也就可以通过这来控制网页中css长方体的姿态。至于在两个网页/客户端传输数据,当然是用websocket最好了。这里刚好我之前做过两个小demo关于这个。
思路
这个 Demo 分为客户端,控制端和服务端。客户端是一个用css3
写的三维的长方体,只接受websocket
数据。
控制端使用deviceorientation
事件来获取手机姿态并通过websocket
发送姿态数据。服务端就是一个使用ws
库的websocket
服务器,这里我监听的端口是5656
。
bug
这里有个问题就是Z轴在临界值会直接从180°变成-180°,Y轴会在临界值从 90°变成-90°,我想了很久也没有找到解决方法,有好的解决方法可以提issues
使用
源码地址 gyrscope-control-css-cube
1 | git clone https://github.com/GaryChangCN/gyrscope-control-css-cube.git |