资讯专栏INFORMATION COLUMN

利用手机姿态控制网页中css长方体姿态

Profeel / 734人阅读

摘要:思路这个分为客户端,控制端和服务端。客户端是一个用写的三维的长方体,只接受数据。控制端使用事件来获取手机姿态并通过发送姿态数据。附之前写过两篇文章是关于用制作立方体和使用搭建聊天室对本文有点借鉴意义。

思路

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


演示视频

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/111490.html

相关文章

  • 利用手机姿态控制网页css方体姿态

    摘要:思路这个分为客户端,控制端和服务端。客户端是一个用写的三维的长方体,只接受数据。控制端使用事件来获取手机姿态并通过发送姿态数据。附之前写过两篇文章是关于用制作立方体和使用搭建聊天室对本文有点借鉴意义。 思路 这个 Demo 分为客户端,控制端和服务端。客户端是一个用css3写的三维的长方体,只接受websocket数据。控制端使用deviceorientation事件来获取手机姿态并通...

    Clect 评论0 收藏0
  • 胶囊 (向量神经) 网络

    斯蒂文认为机器学习有时候像婴儿学习,特别是在物体识别上。比如婴儿首先学会识别边界和颜色,然后将这些信息用于识别形状和图形等更复杂的实体。比如在人脸识别上,他们学会从眼睛和嘴巴开始识别最终到整个面孔。当他们看一个人的形象时,他们大脑认出了两只眼睛,一只鼻子和一只嘴巴,当认出所有这些存在于脸上的实体,并且觉得这看起来像一个人。斯蒂文首先给他的女儿悠悠看了以下图片,看她是否能自己学会认识图中的人(金·卡...

    codercao 评论0 收藏0
  • 胶囊网络为何如此热门?与卷积神经网络相比谁能更甚一筹?

    摘要:胶囊网络是一种热门的新型神经网络架构,它可能会对深度学习特别是计算机视觉领域产生深远的影响。下几层胶囊也尝试检测对象及其姿态,但工作方式非常不同,即使用按协议路由算法。 胶囊网络(Capsule networks, CapsNets)是一种热门的新型神经网络架构,它可能会对深度学习特别是计算机视觉领域产生深远的影响。等一下,难道计算机视觉问题还没有被很好地解决吗?卷积神经网络(Convolu...

    lscho 评论0 收藏0
  • 自动驾驶车辆在结构化场景基于HD-Map由粗到精语义定位

    摘要:最后,为了使规划模块获得更平滑的姿态,提高定位系统的鲁棒性,采用了带有滑动窗口的姿态图,优化窗口中包含跟踪良好的帧数据,如果滑动窗口的大小超过阈值,历史记录中的一帧将根据车辆状态从滑动窗口中剔除。 点云PCL免费知识星球,点云论文速读。 文章:Coarse-to-fine Semanti...

    Honwhy 评论0 收藏0
  • 吃了这些数据集和模型,跟 AI 学跳舞,做 TensorFlowBoys

    摘要:最近,这就是街舞第二季开播,又一次燃起了全民热舞的风潮。然而,真要自己跳起来,实际与想象之间,估计差了若干个罗志祥。系统映射结果展示对于系统的结果,研究人员表示还不完美。谷歌在和跳舞的结合上也花了心思。好了,先不说了,我要去跟学跳舞了。 最近,《这!就是街舞》第二季开播,又一次燃起了全民热舞的风潮。 刚开播没多久,这个全程高能的节目,就在豆瓣上就得到了 9.6 的高分。舞者们在比赛中精...

    dkzwm 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<