CSS3构建3D的世界

[hubvue]

什么是HTML5陀螺仪

陀螺仪又叫角速度传感器，是不同于加速度计(G-sensor)的，他的测量物理量是偏移、倾斜时的转动角速度。在手机上，仅用加速度计没办法测量或重构出完整的3D动作，测不到转动的动作的，G-sensor只能检测轴向的线性动作。但是陀螺仪则可以对转动、偏转的动作做很好的测量，这样就可以精确分析判断出使用者的实际动作。而后根据动作，可以对手机做相应的操作。

陀螺仪角速度的分析

平常的加速度计只是检测轴向的线性动作，而陀螺仪是可以根据3D空间的角速度的变化来做出反应。陀螺仪的角速度中有三个：

1. gamma角：绕轴向垂直与手机上面旋转的角度，作用域为[-90,90]
2. beta角：绕轴向垂直与手机侧面旋转的角度。作用域为[-180,180]
3. alpha角：绕轴向垂直与手机正面旋转的角度。作用域为[0,360]

代码层面的分析

在代码上用window监听三个事件对象就可以得到一系列信息。

1. deviceorientation：设备的物理信息，表示为一系列本地坐标系的旋角。
2. devicemotion：提供设备的加速信息。
3. compassneedscalibration：同域通知Web站点使用罗盘校准上述事件。

获取旋转的角

window.addEventListener("deviceorientation",function(event){
    var alpha = event.alpha;
    var beta = event.beta;
    var gamma = event.gamma;
    a.innerHTML = alpha;
    b.innerHTML = beta;
    g.innerHTML = gamma;
})

使用罗盘校准，事件判断罗盘是否准确

 //当罗盘不准的时候触发
window.addEventListener("compassneedscalibration",function(event){
    alert("您的罗盘需要校准");
    event.prevebtDefault();
},true);

获取重力加速度

重力加速度是一个物体受重力作用的情况下所具有的的加速度。与位置无关；（G = mg） (其中g = 9.80665m/s^2 为标准的重力加速度)

window.addEventListener("devicemotion",function(event){
//处理event.acceleration
//x(y,z)      表示设备在x(y,z)方向上的移动加速度值
//event.accelerationIncludingGtavity    //表示带上重力加速度的加速度
//考虑了重力加速度后设备在x(y,z)
//event.rotationRate   通过这个属性拿到   alpha,beta,gamma  表示设备绕x，y，z轴旋转的角度。
},true)

测试小例子

陀螺仪值测试

CSS3 3D模型

如何把图放在3D空间中，有两种模式：

1. 球面投影：
   在三维空间，每个3D模型都等同于一个多面体(即3D模型只能由不弯曲的平面组成)。你只能以一个正多边形表示圆；边越多，园就越完美。球面投影是把图片竖直切成一条一条的，然后再接起来。

   如何把切的图形成圆？？（先转后推的原则）

   1. 我们把所有的图片集合到一个未知，依据图片的宽度以及图片的数量，计算出要旋转的角度。
   2. 旋转之后根据三角函数计算出形成圆的半径，然后把所有图片都推出去.

2. 立方体投影 : 把图片切成一块一块的小正方形，最后组合成一个立方体。

魔方小例子

魔方

集合Touch事件

通过使用移动端touch事件，通过touchstart点击确认首次触碰点，然后通过touchmove事件进行3D动作效果。

viewer.on("touchstart",function(e){
    x1 = e.targetTouches[0].pageX;
    y1 = e.targetTouches[0].pageY;
})
viewer.on('touchmove',function(e){
var dist_x = x2 - x1,
     dist_y = y2-y1,
     deg_x = Math.atan2(dist_y,perspective) / Math.PI * 180,
     deg_y = Math.atan2(dist_x,perspective) / Math.PI * 180,
     i,
     c_x_deg += deg_x,
     c_y_deg += deg_y;
     cube.css('transform','rotateX('+ deg_x+'deg) rotateY(' + deg_y +'deg)');
})