思路
这个 Demo 分为客户端,控制端和服务端。客户端是一个用css3
写的三维的长方体,只接受websocket
数据。
控制端使用deviceorientation
事件来获取手机姿态并通过websocket
发送姿态数据。服务端就是一个使用ws
库的websocket
服务器,这里我监听的端口是5656
。
附
之前写过两篇文章是关于用 css 制作3D立方体 和 使用websocket搭建聊天室 对本文有点借鉴意义。
CSS3 3D立方体
使用websocket 的ws库构建聊天室
bug
这里有个问题就是Z轴在临界值会直接从180°变成-180°,Y轴会在临界值从 90°变成-90°,我想了很久也没有找到解决方法,有好的解决方法可以提issues
使用
源码地址 gyrscope-control-css-cube
git clone https://github.com/GaryChangCN/gyrscope-control-css-cube.git
npm update
npm start
//之后修改客户端和控制端 websocket 协议的地址为你服务端所在的局域网地址
示例
演示视频
最后
以上就是健壮鲜花最近收集整理的关于 利用手机姿态控制网页中css长方体姿态的全部内容,更多相关内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复