利用手機姿態控制網頁中css長方體姿態

Clect 發布于2019-08-20 10:39 / 2020人閱讀

摘要：思路這個分為客戶端，控制端和服務端。客戶端是一個用寫的三維的長方體，只接受數據。控制端使用事件來獲取手機姿態并通過發送姿態數據。附之前寫過兩篇文章是關于用制作立方體和使用搭建聊天室對本文有點借鑒意義。

思路

這個 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 協議的地址為你服務端所在的局域網地址

示例

演示視頻

云服務器 GPU云服務器姿態阿里云服務器中網頁中css不顯示不出來 js控制立方體旋轉利用云服務器遠程控制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/80250.html

利用手機姿態控制網頁中css長方體姿態

摘要：思路這個分為客戶端，控制端和服務端。客戶端是一個用寫的三維的長方體，只接受數據。控制端使用事件來獲取手機姿態并通過發送姿態數據。附之前寫過兩篇文章是關于用制作立方體和使用搭建聊天室對本文有點借鑒意義。思路這個 Demo 分為客戶端，控制端和服務端。客戶端是一個用css3寫的三維的長方體，只接受websocket數據。控制端使用deviceorientation事件來獲取手機姿態并通...

Profeel 2019-08-29 11:12 評論0 收藏0
膠囊 (向量神經) 網絡

斯蒂文認為機器學習有時候像嬰兒學習，特別是在物體識別上。比如嬰兒首先學會識別邊界和顏色，然后將這些信息用于識別形狀和圖形等更復雜的實體。比如在人臉識別上，他們學會從眼睛和嘴巴開始識別最終到整個面孔。當他們看一個人的形象時，他們大腦認出了兩只眼睛，一只鼻子和一只嘴巴，當認出所有這些存在于臉上的實體，并且覺得這看起來像一個人。斯蒂文首先給他的女兒悠悠看了以下圖片，看她是否能自己學會認識圖中的人(金·卡...

codercao 2019-04-25 18:24 評論0 收藏0
膠囊網絡為何如此熱門？與卷積神經網絡相比誰能更甚一籌？

摘要：膠囊網絡是一種熱門的新型神經網絡架構，它可能會對深度學習特別是計算機視覺領域產生深遠的影響。下幾層膠囊也嘗試檢測對象及其姿態，但工作方式非常不同，即使用按協議路由算法。膠囊網絡（Capsule networks, CapsNets）是一種熱門的新型神經網絡架構，它可能會對深度學習特別是計算機視覺領域產生深遠的影響。等一下，難道計算機視覺問題還沒有被很好地解決嗎？卷積神經網絡（Convolu...

lscho 2019-04-25 18:24 評論0 收藏0
吃了這些數據集和模型，跟 AI 學跳舞，做 TensorFlowBoys

摘要：最近，這就是街舞第二季開播，又一次燃起了全民熱舞的風潮。然而，真要自己跳起來，實際與想象之間，估計差了若干個羅志祥。系統映射結果展示對于系統的結果，研究人員表示還不完美。谷歌在和跳舞的結合上也花了心思。好了，先不說了，我要去跟學跳舞了。最近，《這！就是街舞》第二季開播，又一次燃起了全民熱舞的風潮。剛開播沒多久，這個全程高能的節目，就在豆瓣上就得到了 9.6 的高分。舞者們在比賽中精...

dkzwm 2019-06-26 19:00 評論0 收藏0