html 关于陀螺仪知识

先来一波羞羞的网站 一個h5和css提升的网址

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>