在之前的文章js调用陀螺仪配合CSS3 3D实现VR效果(一)中,介绍了用css3搭建了3d正方体,并控制正方体运动,模拟3d环境中视角的变化。这种方式的本质是"观测者不动，世界在动",观测者就是网页浏览器可视区，世界就是网页的内容。

结合之前的内容，我们可以用六张照片完成一个正方体空间，达到模拟“世界”的作用，让用户看到一个全景的空间。六张图片和全景图的关系，大家可以了解一下“天空盒”的概念。只要有设备能拍摄全景图，有很多软件能将全景图生成为“天空盒”模式的六张图片，以便实现VR全景网页的效果。本文介绍的方式本质还是应用dom来实现空间，当然也有通过canvas+three.js的方式实现全景，但是webgl在移动端的性能和兼容性还有待提高，不过从页面渲染的性能来看，dom的实现方式是差一些。dom天空盒实现如下:

<style type="text/css">
#div span:nth-of-type(1){/*图片1*/}
#div span:nth-of-type(2){/*图片2*/}
#div span:nth-of-type(3){/*图片3*/}
#div span:nth-of-type(4){/*图片4*/}
#div span:nth-of-type(5){/*图片5*/}
#div span:nth-of-type(6){/*图片6*/}
#div span{ background-position: 0 0; background-repeat: no-repeat;}
</style>
<------  六个面形成封闭正方体  ------>
<div id="box">
  <div id="z" style="transform: translateZ(300px);">
   <div id="div" style="transform: rotateX(0deg) rotateY(0deg);">
     <span style="transform: rotateY(0deg) translateZ(-512px);"></span>
     <span style="transform: rotateY(-90deg) translateZ(-512px);"></span>
     <span style="transform: rotateY(-180deg) translateZ(-512px);"></span>
     <span style="transform: rotateY(-270deg) translateZ(-512px);"></span>
     <span style="transform: rotateX(-90deg) translateZ(-512px);"></span>
     <span style="transform: rotateX(90deg) translateZ(-512px);"></span>
   </div>
  </div>
</div>
<script type="text/javascript">
    var box = document.querySelector('#box');
    ....
    box.addEventListener('touchstart',function(e){
        ....
    });
    box.addEventListener('touchmove',function(e){
        ....
    });
    box.addEventListener('touchend',function(e){
        ....
    });
<script>

网页运行时，通过touch方法控制正方体的transform旋转。针对手指滑动方向，可以控制正方体的旋转方向，实现VR的空间。若将控制正方体旋转的方式由滑屏升级为成陀螺仪，则最终实现VR效果。陀螺仪的实现如下：

window.addEventListener('deviceorientation',function(e){
        var oDiv = document.querySelector('#div');
        //对应3d环境中的x,y,z轴
        e.alpha;
        e.gamma;
        e.beta;
        //控制oDiv的rotateX,rotateY
}

陀螺仪的控制和手指滑动控制可以结合起来共存使用，使操作更顺滑。