利用手机姿态控制网页中css长方体姿态-优快云博客

本文介绍了一个基于CSS3和WebSocket技术实现的三维立方体项目。客户端通过CSS3创建了一个三维立方体，并通过WebSocket接收控制端发送的姿态数据进行旋转。控制端利用deviceorientation事件获取手机姿态，并将数据通过WebSocket发送到服务端。

思路

这个 Demo 分为客户端，控制端和服务端。客户端是一个用css3写的三维的长方体，只接受websocket数据。
控制端使用deviceorientation事件来获取手机姿态并通过websocket发送姿态数据。服务端就是一个使用ws库的websocket 服务器，这里我监听的端口是5656。

附

之前写过两篇文章是关于用 css 制作3D立方体 和 使用websocket搭建聊天室 对本文有点借鉴意义。

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 协议的地址为你服务端所在的局域网地址

示例

图片描述
演示视频