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

lpjustdoit 发布于2019-08-26 11:56 / 1051人阅读

摘要：日常闲扯从上一篇文章到这篇中间快过了一年了，时间真滴过得快。不是在下中间没想过写新的文章，而是自己确实变懒了体重。。。。。如果有人碰到过类似的问题并且找到了解决办法的话，强烈欢迎留言或者私信，毕竟本人还是想写个完整的插件的。

日常闲扯

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

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

链接

demo ：点我，我是demo
github ：欢迎大家来点个星

原理

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

各边初始位置指的就是：场景容器的translateZ的值;

视点距场景的距离是 let space = perspective的值 - 场景容器的translateZ值

而形成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会跳动得很厉害，没办法让体验变得顺畅，所以去除了）。如果有人碰到过类似的问题并且找到了解决办法的话，强烈欢迎留言或者私信，毕竟本人还是想写个完整的插件的。

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

云服务器 GPU云服务器 js 资源甘特图插件全景图 js放大镜插件三个图大数据全景图

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107853.html

3D全景漫游

摘要：可选，默认值为，设置为则禁止用户和全景图交互导航条不可用。可选，默认值为，全景图在毫秒后会自动进行动画。当全景图准备就绪并且第一张图片显示时的回调函数。 3D全景漫游 showImg(http://mmbiz.qpic.cn/mmbiz/cibketMByvrbpDqUQ9LiaBvutnwMehicnO2RZurdl96FLtwqlf6LjWS0Bv8ApQY0YjHdtyFWuzz...

DesGemini 2019-08-19 18:26 评论0 收藏0
看完这篇，你也可以实现一个360度全景插件

摘要：两种相机的区别目前提供了几种不同的相机，最常用的，也是下面插件中使用的两种相机是透视相机正交投影相机。上面的图很清楚的解释了两种相机的区别右侧是正交投影相机他不具有透视效果，即物体的大小不受远近距离的影响，对应的是投影中的正交投影。导读本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。我们先来看一下插件的效果： showImg(https://user...

Michael_Lin 2019-05-23 16:25 评论0 收藏0
看完这篇，你也可以实现一个360度全景插件

摘要：导读本文从绘图基础开始讲起，详细介绍了如何使用开发一个功能齐全的全景插件。两种相机的区别目前提供了几种不同的相机，最常用的，也是下面插件中使用的两种相机是透视相机正交投影相机。导读本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。我们先来看一下插件的效果： showImg(https://segmentfault.com/img/remote/...

XiNGRZ 2019-08-23 17:16 评论0 收藏0
看完这篇，你也可以实现一个360度全景插件

摘要：导读本文从绘图基础开始讲起，详细介绍了如何使用开发一个功能齐全的全景插件。两种相机的区别目前提供了几种不同的相机，最常用的，也是下面插件中使用的两种相机是透视相机正交投影相机。导读本文从绘图基础开始讲起，详细介绍了如何使用Three.js开发一个功能齐全的全景插件。我们先来看一下插件的效果： showImg(https://segmentfault.com/img/remote/...

fredshare 2019-08-02 16:15 评论0 收藏0