JS+CSS3 360度全景图插件 - Watch3D.js

孤月

日常闲扯

从上一篇文章到这篇中间快过了一年了,时间真滴过得快。不是在下中间没想过写新的文章,而是自己确实变懒了(体重+1 +1 +1 +1....) 。。OTL。。。不过到最后觉得还是需要写点东西,不然人就真废了,于是便有了这样一个插件(其实是偶然看到别人的一个全景案例不是用webgl写的,从而产生了兴♂趣,就去练了一下手)。

代码总的来说比较简单,相比较webgl上手难度来讲,用css3简单太多了,主要是简单的初高中数学几何学知识,然后用好perspective和transform就行了,废话就到这里,下面开始正文。

链接

demo : 点我,我是demo
github : 欢迎大家来点个星

原理

总的来说,就一句话: 保证3D的视点在场景立方体的内部就行了,如下图(从别人那里拿的)

clipboard.png

  1. 各边初始位置指的就是:场景容器的translateZ的值;
  2. 视点距场景的距离是 let space = perspective的值 - 场景容器的translateZ值
  3. 而形成3D全景效果的条件就是:space < 多边形的边偏移的translateZ值。

不理解的可以看这篇文章,原理写得比我详细多了:地址

我这里补充一点踩坑情况:

1.各边偏移距离的计算方法
首先需要确定多边形的边数,最小为4,我们这里设为10,那么每条边与中心点的夹角为 360/10 = 36度
其次确定每条边的长度, 边长 = 图片宽度 / 数量, 我们这里假设 图片宽度 5000,有 边长 = 5000 / 10 = 500px
最后确定偏移距离:

let num = 10; //边数
let angle = 360 / num; //每条边对应夹角
let width = 5000;
let unit = width / num; 
let translateZ = ( unit / 2 ) / Math.tan( angle / 2 * Math.PI / 180 );
//这里基本上已经计算完成,但是实际效果是每一块区域都会显示一条条白色的边,很难看,具体可以参考上面别人写的那篇文章里的案例。所以我们需要做点处理
let transZ = translateZ - 5;
//往中心偏移5px,这样就看不出来了

2.关于初始角度的问题
由于处理多边形每条边的时候是 “先旋转,后偏移” 所以“默认情况下”我们见到的第一张图是并不属于第一条边,第一条边正对屏幕向外。这里我们让 场景元素 初始从-180度 开始就可以了

插件使用方法

无依赖库
详细可以查看 github

let w3d = new watch3D({
    wrapper : ".wrapper", //容器元素为.wrapper
    autoplay : true, //自动播放
    width: 5000, //宽度为5000
    height : 2500, //高度为2500
    num : 12, //分成12块
    maxY : 25, //最大仰俯角为25度
    reverse : false, //反向为false
    tips : { //tip数据
        0 : {
            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){
        //加载中
    },
    loadend : function(data){
        //加载结束后
    },
    start : function(point){
        //触摸开始
    },
    move : function(point){
        //触摸移动中
    },
    end : function(point){
        //触摸结束
    }
});

结语

文章写得比较简单,主要是不知道要写些什么东西,贴代码一段一段解释的话感觉很累,而且源码中基本上我都加了注释,所以偷点懒吧。

插件只提供了一些基本的功能,没有监听deviceorientation事件,不是没这打算,是在编写过程中遇到了一个bug而且查了半天也没找到解决办法(当beta值处于90和-90时,alpha和gamma会跳动得很厉害,没办法让体验变得顺畅,所以去除了)。如果有人碰到过类似的问题并且找到了解决办法的话,强烈欢迎留言或者私信,毕竟本人还是想写个完整的插件的。

以上,文章很乱,写也得不怎么尽兴,主要是没办法把教程写清楚,如果确实疑问很大的话可以联系我,我会尽力回答的,求各位大神轻喷,谢谢。

阅读 5.1k

爬行世界
进阶之路是爬着走完的...

人生得意须尽欢,莫使金樽空对月

2.9k 声望
351 粉丝
0 条评论

人生得意须尽欢,莫使金樽空对月

2.9k 声望
351 粉丝
文章目录
宣传栏