基于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 相关文章推荐
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
JavaScript中的连字符详解
Nov 28 Javascript
js中Math之random,round,ceil,floor的用法总结
Dec 26 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
JavaScript统计字符串中每个字符出现次数完整实例
Jan 28 Javascript
JS实现新建文件夹功能
Jun 17 Javascript
JS实现匀速与减速缓慢运动的动画效果封装示例
Aug 27 Javascript
JavaScript常用数组操作方法,包含ES6方法
May 10 Javascript
vue spa应用中的路由缓存问题与解决方案
May 31 Javascript
详解vue组件之间的通信
Aug 30 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
详解JavaScript 的执行机制
Sep 18 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分页函数
2006/10/09 PHP
php+javascript的日历控件
2009/11/19 PHP
PHP面向接口编程 耦合设计模式 简单范例
2011/03/23 PHP
简单的php缓存类分享     php缓存机制
2014/01/22 PHP
体育彩票排列三组选三算法分享
2014/03/07 PHP
php 实现进制相互转换
2016/04/07 PHP
js获取客户端网卡的IP地址、MAC地址
2014/03/26 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
javascript中的 object 和 function小结
2016/08/14 Javascript
关于JavaScript数组你所不知道的3件事
2016/08/24 Javascript
vue实现页面加载动画效果
2017/09/19 Javascript
详解10分钟学会vue滚动行为
2017/09/21 Javascript
vue利用better-scroll实现轮播图与页面滚动详解
2017/10/20 Javascript
完美解决iview 的select下拉框选项错位的问题
2018/03/02 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
Seajs源码详解分析
2019/04/02 Javascript
小程序最新获取用户昵称和头像的方法总结
2019/09/23 Javascript
Node如何后台数据库使用增删改查功能
2019/11/21 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
python 生成器协程运算实例
2017/09/04 Python
python 获取指定文件夹下所有文件名称并写入列表的实例
2018/04/23 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
Python图像处理之图片文字识别功能(OCR)
2019/07/30 Python
Win下PyInstaller 安装和使用教程
2019/12/25 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
Python内置函数locals和globals对比
2020/04/28 Python
Win10用vscode打开anaconda环境中的python出错问题的解决
2020/05/25 Python
使用python创建Excel工作簿及工作表过程图解
2020/05/27 Python
python中append函数用法讲解
2020/12/11 Python
社区先进事迹材料
2014/05/19 职场文书
2015年女生节活动总结
2015/02/27 职场文书
婚前协议书怎么写,才具有法律效力呢 ?
2019/06/28 职场文书
Python基础之数据结构详解
2021/04/28 Python
详解CSS玩转图片Base64编码
2021/05/25 HTML / CSS
MySQL一些常用高级SQL语句
2021/07/03 MySQL