「移動設備陀螺儀」與「preserve-3d」碰撞的火花

cppowboy 發布于2019-08-29 14:15 / 3350人閱讀

摘要：它描述的是設備由前向后旋轉的情況。表示設備沿軸上的旋轉角度，范圍為度。完整的代碼大概是這樣慶祝時刻現在我們已經完成了，一個利用移動設備陀螺儀與實現的交互效果。

原文鏈接：航洋 blog

「移動設備陀螺儀」與「preserve-3d」碰撞的火花

涉及知識「CSS：transform、JS：deviceorientation」

廢話不多，先上 DEMO「請使用移動設備查看」

如何搭建一個簡單的立方體

只需要寥寥幾行 HTML、CSS 代碼就能產出一個「立方體」

核心 HTML 如下

CSS 第一步

.cube {
  width: 160px;
  height: 160px;
  position: relative;
  -webkit-transform-style: preserve-3d; /* 這一句重點 */
  transform-style: preserve-3d;
  -webkit-transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
  transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg);
}
.cube-face {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  box-shadow: inset 0 0 4px 1px #fff;
  box-sizing: border-box;
  background: -webkit-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: -o-linear-gradient(45deg, rgba(156, 144, 144, .6), #000);
  background: linear-gradient(45deg, rgba(156, 144, 144, .6), #000)
}

這個 CSS 過于簡單，就不贅述與解釋。
主要是要設置父元素 .cube 的 transform-style: preserve-3d，
使子元素位于 3D 空間中，不然子元素都是「平面內、扁平化」，達不到 3D 效果。

給所有子元素 .cube-face 設置了透明的漸變色 rgba(156, 144, 144, .6) 背景，
是為了更好的觀察到「被遮住的反面」，視覺上更加立體

目前效果截圖大概是這個樣子：

看起來就像一個正方形，其實是 6 個面全部重疊在一起。

CSS 第二步

.cube-front {
  -webkit-transform: translateZ(80px);
  transform: translateZ(80px);
}

上面 4 行代碼使得「正面 .cube-front」向前移動 80px「也就是立方體一半的邊長」。
同理我們可以設置「背面 .cube-back」向后移動 80px
效果大概是這樣：

CSS 第三步

.cube-left {
  -webkit-transform: rotateY(90deg);
  transform: rotateY(90deg);
}

上面 4 行代碼使得「左面 .cube-left」先順時針旋轉「90 度」
大概是這個樣子：

然后再向「左邊」移動 80px 就 OK 啦，
注意：左邊是 Z 軸負方向。

.cube-left {
  -webkit-transform: rotateY(90deg) translateZ(-80px);
  transform: rotateY(90deg) translateZ(-80px);
}

大概是這個樣子：

同理，我們可以做出右邊的效果，唯一區別就是，右邊移動方向與左邊相反。
道理類似，異曲同工，上邊和下邊，想必聰明的大家都掌握了正確寫法姿勢。

成品大概是這個樣子：

用陀螺儀使立方體動起來

細心的開發者應該發現了，在最開始，我給父元素 .cube 設置了：
transform: rotateX(10deg) rotateY(10deg) rotateZ(10deg)
認讓父元素在三維空間上旋轉 10 度。
如果我們動態連續修改這三個值，絕對可以達到 3D 旋轉動畫的效果。

這個時候，JS 的 deviceorientation「檢測設備方向」事件閃現突然閃現在我的腦海。
因為這個事件的回調參數里面恰好有三個參數「beta、gamma、alpha」，分別代表「X、Y、Z」的旋轉方向。

beta 表示設備在 x 軸上的旋轉角度，范圍為 [-180, 180] 度。它描述的是設備由前向后旋轉的情況。
gamma 表示設備在 y 軸上的旋轉角度，范圍為 [-90, 90] 度。它描述的是設備由左向右旋轉的情況。
alpha 表示設備沿 z 軸上的旋轉角度，范圍為 [0, 360] 度。

大概是這個樣子：

注冊 deviceorientation 事件，得到 x、y、z

const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  // 1. 得到 x、y、z
  // 2. 處理 x、y、z
  // 3. 使用 x、y、z
}

global.addEventListener("deviceorientation", handleOrientation)

處理 x、y、z

由于我們期望立方體可以在 x、y、z 三個反向的旋轉范圍是 [-360, 360] 度，
但是 beta、gamma、alpha 的范圍并不是我們期望的范圍，所以我們要處理一下數據。

{
  x: x * 2,
  y: y * 4,
  z: (z - 180) * 2
}

使用 x、y、z

我們現在得到的 x、y、z 已經在 [-360, 360] 度范圍內了，
接下來要做的就是，使用 x、y、z 修改父元素 .cube 的 rotateX(xdeg) rotateY(ydeg) rotateZ(zdeg) 旋轉值。

完整的代碼大概是這樣：

const cube = document.querySelector(".cube")
const setCubePosition = ({x = 0, y = 0, z = 0}) => {
  cube.style = `transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);-webkit-transform: rotateX(${x}deg) rotateY(${y}deg) rotateZ(${x}deg);`
}
const handleOrientation = ({beta: x, gamma: y, alpha: z}) => {
  setCubePosition({
    x: x * 2,
    y: y * 4,
    z: (z - 180) * 2
  })
}

global.addEventListener("deviceorientation", handleOrientation)

慶祝時刻

現在我們已經完成了，一個利用「移動設備陀螺儀」與「preserve-3d」實現的 3D 交互效果。
讓我們為自己鼓掌
???

點我查看完整代碼

感謝閱讀

云服務器 GPU云服務器移動設備檢測移動設備 java小球的碰撞 java圓的碰撞

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

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

「移動設備陀螺儀」與「preserve-3d」碰撞的火花

摘要：它描述的是設備由前向后旋轉的情況。表示設備沿軸上的旋轉角度，范圍為度。完整的代碼大概是這樣慶祝時刻現在我們已經完成了，一個利用移動設備陀螺儀與實現的交互效果。原文鏈接：航洋 blog 「移動設備陀螺儀」與「preserve-3d」碰撞的火花涉及知識「CSS：transform、JS：deviceorientation」廢話不多，先上 DEMO「請使用移動設備查看」如何搭建一個簡...

jsyzchen 2019-08-22 13:53 評論0 收藏0
探究 CSS 混合模式濾鏡導致 CSS 3D 失效問題

摘要：濾鏡也會導致失效完了嗎沒有。上文中的是什么上文的準確而言是什么我也無法確定，推測應該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數組和所使用的存儲區的集合顏色緩存深度緩存模板緩存和累計緩存。今天在寫一個小的 CSS Demo，一個關于 3d 球的旋轉動畫，關于 CSS 3D，少不了會使用下面這幾個屬性： { transform-style: preserve-3d; ...

Betta 2019-08-30 15:54 評論0 收藏0
探究 CSS 混合模式濾鏡導致 CSS 3D 失效問題

摘要：濾鏡也會導致失效完了嗎沒有。上文中的是什么上文的準確而言是什么我也無法確定，推測應該是，幀緩存對象，存在于顯存中。幀緩存是一些二維數組和所使用的存儲區的集合顏色緩存深度緩存模板緩存和累計緩存。所以，短期內可能無望解決。今天在寫一個小的 CSS Demo，一個關于 3d 球的旋轉動畫，關于 CSS 3D，少不了會使用下面這幾個屬性： { transform-style: preser...

番茄西紅柿 2019-04-23 11:58 評論0 收藏0
css3旋轉的盒子

摘要：因為不管你怎么活，明天太陽照樣升起。我們能做的，就是盡全力不讓自己被這種慢性毒藥所蠱惑，努力，努力沖開束縛你的結界。工作中一直做普通的網頁，今天瀏覽到一篇做3d旋轉的盒子的效果，感覺挺好玩，于是跟著教程練了練，在此做個記錄html 1 2 3 4 5 6 camer...

MorePainMoreGain 2019-08-29 11:24 評論0 收藏0