JS+CSS3 360度全景图插件 - Watch3D.js
日常闲扯
从上一篇文章到这篇中间快过了一年了,时间真滴过得快。不是在下中间没想过写新的文章,而是自己确实变懒了(体重+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会跳动得很厉害,没办法让体验变得顺畅,所以去除了)。如果有人碰到过类似的问题并且找到了解决办法的话,强烈欢迎留言或者私信,毕竟本人还是想写个完整的插件的。
以上,文章很乱,写也得不怎么尽兴,主要是没办法把教程写清楚,如果确实疑问很大的话可以联系我,我会尽力回答的,求各位大神轻喷,谢谢。
JS+CSS3 360度全景图插件 - Watch3D.js的更多相关文章
- Three.js制作360度全景图
这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"> ...
- 基于Three.js的360X180度全景图预览插件
基于Three.js的360X180度全景图预览插件 时间 2015-08-12 10:01:10 HTML5中国 原文 http://www.html5cn.org/article-8621-1 ...
- 安卓端360度全景图的html5实现
这里是一款旅游相关的安卓应用,其中虚拟旅游的功能采用html5的360度全景图技术实现,使用户能够身临其境的感受旅游景点的风光. 此处引入了ddpanorama插件,它的原理是在canvas上绘制全景 ...
- HTML5 Canvas实现360度全景图
原文:http://blog.csdn.net/jia20003/article/details/17172571 很多购物网站现在都支持360实物全景图像,可以360度任意选择查看样品,这样 对购买 ...
- 基于Three.js的360度全景--photo-sphere-viewer--简介
这个是基于three.js的全景插件 photo-sphere-viewer.js ---------------------------------------- 1.能添加热点: 2.能调用陀 ...
- js实现360度图片旋转
▓▓▓▓▓▓ 大致介绍 这次是一个简单的效果,就是思路的问题 效果: ▓▓▓▓▓▓ 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动 ...
- JS - 超强大文本动画插件Textillate.js
http://www.yyyweb.com/demo/textillate/ Textillate.js AsimplepluginforCSS3textanimations.
- js手机移动端选择插件 mobileSelect.js
一.mobileSelect获取方法 mobileSelect支持单选.多级联动.自定义回调函数.二次渲染.最新版本下载地址[2017-09-21更新]: https://github.com/onl ...
- Js 之常见手势操作插件 Hammer.js
一.下载 链接:https://pan.baidu.com/s/1UbEtSbT1xcmdzzTCaWmW1A提取码:ldqy 二.案例 三.代码 <!DOCTYPE html> < ...
随机推荐
- 【阅读SpringMVC源码】手把手带你debug验证SpringMVC执行流程
✿ 阅读源码思路: 先跳过非重点,深入每个方法,进入的时候可以把整个可以理一下方法的执行步骤理一下,也可以,理到某一步,继续深入,回来后,接着理清除下面的步骤. ✿ 阅读本文的准备工作,预习一下Spr ...
- java控制流学习
java流程控制学习 Scanner对象 概念 1.通过Scanner类实现程序和人的交互,通过它获取到用户的输入.java.util.Scanner是java5的特征. 我们可以通过Scanner类 ...
- 用 EXISTS 或 NOT EXISTS 用法
项目中遇到这么个情况: t1表 和 t2表 都是150w条数据,600M的样子,都不算大. 但是这样一句查询 ↓ select * from t1 where phone not in (selec ...
- Docker的4种网络模式详细介绍
docker run创建Docker容器时,可以用–net选项指定容器的网络模式,Docker有以下4种网络模式: bridge模式:使用–net =bridge指定: host模式:使用–net = ...
- Git 修改历史提交信息 commit message
修改最近一条提交的消息 git commit --amend 进入vim模式 按字母 o 或者 insert键 开始修改内容 按 esc 推出编辑,最常用的是输入":q"直接退出, ...
- Oneops运维系统
背景:公司对接其他系统时都会将业务分为几大模块由不同的人员去开发部署.那么部署方式为传统方式登录服务器,然后操作.所以每次上线我们可能都需要等待别的同事操作完才能操作自己所负责的业务系统.针对以上 ...
- Oracle视图、存过、包、方法赋予/收回权限给用户
oracle给某用户授权/回收视图查询 赋权: grant select on $_view to $_user; 这样 $_user用户就拥有了查询$_view视图的权限了 回收: revoke s ...
- springboot自定义启动图画
小小娱乐,你是不是看到好多文章或段子上有这个 是不是很好玩,其实修改也很简单,就是在springboot的resources下新建一个banner.txt文件,将要输出图案放到txt文件中就好,启动时 ...
- 在使用Access连接后获取数据--出现此类问题如何解决---未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序解决办法
转载:https://blog.csdn.net/yyzzhc999/article/details/79367114 using System; using System.Collections.G ...
- FOC实现概述
FOC原理框图如下: 其中涉及到两种坐标转换: 1. Clark变换:常规的三相坐标系→静止的二相坐标系α.β 正变换矩阵 $\left[ {\begin{array}{*{20}{c}}{\sqrt ...