html 關於陀螺儀知識

html5陀螺儀

陀螺儀又叫角動量傳感器 , 是不同於加速度計(G-sensor)的 , 他的測量物理量是偏轉的 , 傾斜時的轉動角速度 。 在手機上 , 僅用加速度傳感器是沒辦法測量或重構出完整的3D動作，測不到轉動的動作的，G-sensor只能檢測軸向的綫性動作，這樣就可以精確分析判斷出使用者的實際動作。而後根據動作，可以對手機做相應的操作

• 陀螺儀角度

   

  1.png

表示角動量代碼是怎麼寫呢 , 相對適合手機在靜止的情況下

• deviceorientation : 設備的物理方向信息 , 表示爲一系列本地座標系的旋角
• devicemotion : 提供設備加速信息
• compassneedscalibration : 用於通知web站點使用羅盤信息校準上述事情
• 獲取旋轉角度

 

window.addEventListener("deviceorientation", function(event){
    // 處理event.alpha , event.beta及event.gamma
}, true)

2.png

如果需要用戶校準羅盤 , 可以使用

 

window.addEventListener("compassneedscalibration", function(event){
    // 彈出提示 , 用戶需要羅盤校準
   event.preventDefault();
}, true)

獲取重力加速度

 

window.addEventListener("devicemotion", function(event){

    // x(y, z) : 設備在x(y, z)方向上的移動加速度值
    event.acceleration
    
    // 考慮了重力加速度後設備在x(y, z)水平上的移動加速度值
    event.accelerationIncludingGravity
    
    // alpha , bate , gamma : 設備繞x, y, z軸旋轉的角度 , 相對適合手機在運動的情況下 , 比如把手機扔到空中
    event.rotationRare
    
}, true); 

搖一搖是如何做出來的

上代碼

 

var speed = 30; // speed, 初始化一個正常速度爲30
var x = y = z = lastX = lastY = lastZ = 0; // 所有方向的角度都等於上一次x , y , z的值
function deviceMotionHandler(eventData) {
    var acceleration = event.accelerationIncludingGravity; // 拿到這個值之後就取到他們的xyz
   x = acceleration.x;
   y = acceleration.y;
   z = acceleration.z;
   if(Math.abs(x - lastX) > speed || Math.abs(y - lastY) > speed || Math.abs(z - lastZ) > speed){
    // 簡單搖一搖觸發的代碼
    alert('搖一搖')
   }
}

一些css3d庫

• 創建立方體 , css3d-engine , 在GitHub可以搜到這個css3的引擎

 

// 先創建一個舞臺
var s = new C3D.Stage(); 

// 定義舞臺大小
s.size(window.innerWidth, window.innerHeight).material({
    color:"#ccc"
}).update(); 

// 追加舞臺dom元素
document.getElementById("main").appendChild(s.el);

// 再創建一個立方體放入場景
var c = new C3D.Skybox();
c.size(1024).position(0, 0, 0).material({
// 立方體追加圖片
    front: {image: "images/cube_FR.jpg"},
    back: {image: "images/cube_BC.jpg"},
    left: {image: "images/cube_LF.jpg"},
    right: {image: "images/cube_RT.jpg"},
    up: {image: "images/cube_UP.jpg"},
    down: {image: "images/cube_DN.jpg"},
}).update(); 
s.appChild(c)

一些js視覺差的庫

 

<ul id="scene">
    <li class="layer" data-depth="0.00">
        <img src="layer1.png">
    </li>
    <li class="layer" data-depth="0.20">
        <img src="layer2.png">
    </li>
    <li class="layer" data-depth="0.40">
        <img src="layer3.png">
    </li>
</ul>
<script>
    var scene = document.getElementById("scene");
    var parallax = new Parallax(scene); // 這個Parallax庫時一個js視覺差的庫
</script>