每日八卦距离上一篇和这篇已经快一年了，时间过得真快。不是没想过第二天中午再写一篇新文章，而是真的变懒了（权重+1+1+1+1....）。.OTL。..但是最后还是觉得自己还是需要写点东西，不然就没用了，于是就有了这么一个插件（其实是无意中看到别人写的全景图案例，不是用webgl写的，所以我产生了兴趣，所以我去练习了一下）。代码一般比较简单。相对于webgl入门的难度，使用css3要简单的多。主要是初中简单的数学和几何知识，然后很好的运用透视和变换。废话就到这里，开始Word吧。链接demo：点我，我是demogithub：欢迎大家点个star原理总的来说，就一句话：保证3D视点在scenecube内部就可以了，如下图（摘自别人)和初始化的每一边的位置指的是：场景容器的translateZ的值；视点与场景的距离为设space=perspective-场景容器translateZ的值，形成3D全景效果为：space<多边形边缘偏移的translateZ值。如果你不明白，你可以阅读这篇文章。原理写得比我的更详细：我这里稍微补一下地址：1.每边偏移距离的计算方法首先需要确定多边形的边数，最小为4，我们这里设置为10，那么每条边和中心点的夹角就是360/10=36度。接下来，确定每一边的长度。边长=图片宽度/数量。这里我们假设图片宽度为5000，有边长=5000/10=500px最后确定偏移距离：letnum=10;//边数令角=360/num;//每边对应角度letwidth=5000;letunit=width/num;lettranslateZ=(unit/2)/Math.tan(angle/2*Math.PI/180);//到这里基本算完了，但实际效果是每个区域都会显示一条白边，whichisugly具体可以参考上面别人写的文章中的案例。所以我们需要做一些处理lettransZ=translateZ-5;//向中心偏移5px，这样就看不到“所以”默认情况下“我们看到的第一张图片不属于第一条边，并且第一边面向屏幕外。这里我们让场景元素最初从-180度开始。插件方法不依赖库。详见githubletw3d=newwatch3D({wrapper:".wrapper",//容器元素为.wrapperautoplay:true,//自动播放width:5000,//widthis5000height:2500,//heightis2500num:12,//分成12块maxY:25,//最大俯仰角为25度reverse:false,//reverse为falsetips:{//tipdata0:{styles:{"height":"100px","width":"100px","background-color":"#6cf","text-align":"center","margin-right":"10px","color":"#fff","cursor":"pointer"},content:"风景1",callback:function(e){w3d.pause();w3d.changeData({num:10,resource:"sources/4.jpg"},true);}}},resource:"sources/5.jpg",//图片资源地址loadstart:function(){//开始加载},loading:function(data){//loading},loadend:function(data){//加载后},start:function(point){//触摸开始},move:function(point){//触摸移动},end:function(point){//触摸结束}});结语文章比较简单，主要是不知道写什么，而且贴代码一段一段讲解很累，而且源码基本都是我注释加的，偷懒吧。该插件只提供一些基本功能，不监听deviceorientation事件。并不是没有这样的计划。是写的过程中遇到的bug，找了半天也没找到解决办法（当beta值为90和-90时，alpha和gamma会跳动很多，没办法使体验流畅，所以去掉）。如果有谁遇到过类似的问题并且找到了解决方法，欢迎留言或者私信。毕竟，我还是想写一个完整的插件。以上，文章很乱，写的不是很开心。主要是教程写的不太清楚。如果你真的有一个大问题，你可以联系我。我会尽力回答。
