基于Three.js插件制作360度全景图


Posted in Javascript onNovember 29, 2016

这是个基于three.js的插件,预览地址:戳这里

使用方法:

1、这个插件的用法很简单,引入如下2个js

<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>

2、初始化一下,(具体各种参数配置根据情况而定)

var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div
})

配置参数

下面是该全景图插件的所有可用配置参数:

panorama:必填参数,全景图的路径。
container:必填参数,放置全景图的div元素。
autoload:可选,默认值为true,true为自动调用全景图,false为在后面加载全景图(通过.load()方法)。
usexmpdata:可选,默认值为true,如果Photo Sphere Viewer必须读入XMP数据则为true。
default_position:可选,默认值为{},定义默认的位置,及用户看见的第一个点,例如:{long: Math.PI, lat: Math.PI/2}。
min_fov:可选,默认值为30,观察的最小区域,单位degrees,在1-179之间。
max_fov:可选,默认值为90,观察的最大区域,单位degrees,在1-179之间。
allow_user_interactions:可选,默认值为true,设置为false则禁止用户和全景图交互(导航条不可用)。
tilt_up_max:可选,默认值为Math.PI/2,向上倾斜的最大角度,单位radians。
tilt_down_max:可选,默认值为Math.PI/2,向下倾斜的最大角度,单位radians。
zoom_level:可选,默认值为0,默认的缩放级别,值在0-100之间。
long_offset:可选,默认值为PI/360,mouse/touch移动时每像素经过的经度值。
lat_offset:可选,默认值为PI/180,mouse/touch移动时每像素经过的纬度值。
time_anim:可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
theta_offset:过时的选项,可选,默认值为1440,自动动画时水平方向的速度。
anim_speed:可选,默认值为2rpm,动画的速度,每秒/分钟多少radians/degrees/revolutions。
navbar:可选值,默认为false。显示导航条。
navbar_style:可选值,默认为{}。导航条的自定义样式。下面是可用的样式列表:
backgroundColor:导航条的背景颜色,默认值为rgba(61, 61, 61, 0.5)。
buttonsColor:按钮的前景颜色,默认值为transparent。
activeButtonsBackgroundColor:按钮激活状态的背景颜色,默认值为rgba(255, 255, 255, 0.1)。
buttonsHeight:按钮的高度,单位像素,默认值为20。
autorotateThickness:autorotate图标的厚度,单位像素,默认值为1。
zoomRangeWidth:缩放的范围,单位显示,默认值50。
zoomRangeThickness:缩放的范围的厚度,单位像素,默认值1。
zoomRangeDisk:缩放范围的圆盘直径,单位像素,默认值为7。
fullscreenRatio:全屏图标的比例,默认值为3/4。
fullscreenThickness:全屏图标的厚度,单位像素,默认值为2。
loading_msg:可选,默认值为Loading…,图片加载时的提示文字。
loading_img:可选,默认值为null,在加载时显示的图片的路径。
size:可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。
onready:可选值,默认值为null。当全景图准备就绪并且第一张图片显示时的回调函数。

3、上面demo的代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>360全景图</title>
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<!-- 启用webAPP全屏模式-->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- 隐藏状态栏或者设置状态栏的颜色-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- 禁止缓存访问页面-->
<meta http-equiv="Pragma" content="no-cache">
<meta name="applicable-device" content="mobile">
<!-- 页面关键词-->
<link rel="stylesheet" href="css/demo01.css">
<script src="js/three.min.js"></script>
<script src="js/photo-sphere-viewer.min.js"></script>
<!---->
<script src="js/demo01.js"></script>
<!--[if IE]>
<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
<![endif]-->
</head>
<body>
<div class="main">
<h3 id="title">旋转查看效果</h3>
<div id="container"></div>
</div>
</body>
</html>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
text-decoration: none;
border: 0;
outline: 0;
}
.main{
max-width: 640px;
width: 100%;
margin: 0 auto;
}
.main h3{
text-align: center;
padding: 10px 0;
}
/**
* Created by Administrator on 2016/11/29.
*/
//必须在服务器上才能看到效果!
window.onload=function(){
getTitleHeight();
loadingAllImg();
}
//让全景图刚好撑满屏幕
var canvasHeight;
function getTitleHeight(){
var title=document.getElementById('title');
var titleHeight=parseFloat(getComputedStyle(title).height);
var maxHeight=window.innerHeight;
canvasHeight=parseFloat(maxHeight-titleHeight)+'px';
}
//全景图参数配置函数
function loadingAllImg(){
var div = document.getElementById('container');
var PSV = new PhotoSphereViewer({
// 全景图的完整路径
panorama: 'images/360img03.jpg',
// 放全景图的元素
container: div,
// 可选,默认值为2000,全景图在time_anim毫秒后会自动进行动画。(设置为false禁用它)
time_anim: false,
// 可选值,默认为false。显示导航条。
navbar: true,
// 可选,默认值null,全景图容器的最终尺寸。例如:{width: 500, height: 300}。
size: {
width: '100%',
height: canvasHeight
}
});
}

同时,在github上面,大家搜索(Photo Sphere Viewer),也能找到!目前这个插件感觉还不是很完善。

以上所述是小编给大家介绍的Three.js制作360度全景图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
textContent在Firefox下与innerText等效的属性
May 12 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jquery中ajax学习笔记3
Oct 16 Javascript
jQuery基础框架浅入剖析
Dec 27 Javascript
js中的关联数组与普通数组详解
Jul 27 Javascript
js自定义瀑布流布局插件
May 16 Javascript
基于原生js运动方式关键点的总结(推荐)
Oct 01 Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
Feb 13 jQuery
webstorm中vue语法的支持详解
May 09 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
微信小程序实现列表左右滑动
Nov 19 Javascript
jquery购物车结算功能实现方法
Oct 29 #Javascript
JavaScript微信定位功能实现方法
Nov 29 #Javascript
jQuery中的select操作详解
Nov 29 #Javascript
微信小程序加载更多 点击查看更多
Nov 29 #Javascript
AngularJs表单验证实例代码解析
Nov 29 #Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 #Javascript
jQuery Easy UI中根据第一个下拉框选中的值设置第二个下拉框是否可以编辑
Nov 29 #Javascript
You might like
PHP图片处理之图片背景、画布操作
2014/11/19 PHP
php简单获取文件扩展名的方法
2015/03/24 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
用javascript获取地址栏参数
2006/12/22 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
基于javascript实现动态时钟效果
2020/08/18 Javascript
jQuery Ztree行政地区树状展示(点击加载)
2016/11/09 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
2016/12/30 Javascript
解决JS外部文件中文注释出现乱码问题
2017/07/09 Javascript
温故知新——JavaScript中的字符串连接问题最全总结(推荐)
2017/08/21 Javascript
详解Vue的ref特性的使用
2020/01/24 Javascript
ES6 Iterator遍历器原理,应用场景及相关常用知识拓展详解
2020/02/15 Javascript
[02:33]DOTA2亚洲邀请赛趣味视频之吐真话筒
2018/03/31 DOTA
Python实现的简单万年历例子分享
2014/04/25 Python
对于Python异常处理慎用“except:pass”建议
2015/04/02 Python
python写入中英文字符串到文件的方法
2015/05/06 Python
使用Python绘制图表大全总结
2017/02/11 Python
Python 网页解析HTMLParse的实例详解
2017/08/10 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
Numpy中矩阵matrix读取一列的方法及数组和矩阵的相互转换实例
2018/07/02 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
python 自动去除空行的实例
2018/07/24 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Python实现程序判断季节的代码示例
2019/01/28 Python
python添加菜单图文讲解
2019/06/04 Python
如何在Windows中安装多个python解释器
2020/06/16 Python
Johnson Fitness澳大利亚:高级健身器材
2021/03/16 全球购物
常用UNIX 命令(Linux的常用命令)
2013/07/10 面试题
秘书英文求职信范文
2014/01/31 职场文书
2014入党积极分子破除“四风”思想汇报
2014/09/14 职场文书
廉政文化进校园广播稿
2014/10/20 职场文书
免职证明样本
2014/10/23 职场文书
2014年班级工作总结
2014/11/14 职场文书
工厂仓库管理员岗位职责
2015/04/09 职场文书
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL