基于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 相关文章推荐
div+css布局的图片连续滚动js实现代码
May 04 Javascript
图片上传插件jquery.uploadify详解
Nov 15 Javascript
javascript实现动态模态绑定grid过程代码
Sep 22 Javascript
Javascript前端UI框架Kit使用指南之kitjs的对话框组件
Nov 28 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
JS实现将Asp.Net的DateTime Json类型转换为标准时间的方法
Aug 02 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
Oct 25 Javascript
基于Vue2.0的分页组件
Mar 16 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
基于JavaScript canvas绘制贝塞尔曲线
Dec 25 Javascript
javaScript中indexOf用法技巧
Nov 26 Javascript
用vite搭建vue3应用的实现方法
Feb 22 Vue.js
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
在win系统安装配置 Memcached for PHP 5.3 图文教程
2015/03/03 PHP
PHP生成指定随机字符串的简单实现方法
2015/04/01 PHP
php实现微信公众号主动推送消息
2015/12/31 PHP
datePicker——日期选择控件(with jquery)
2007/02/20 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
如何解决easyui自定义标签 datagrid edit combobox 手动输入保存不上
2015/12/26 Javascript
浅谈Nodejs应用主文件index.js
2016/08/28 NodeJs
简单理解js的prototype属性及使用
2016/12/07 Javascript
解决拦截器对ajax请求的拦截实例详解
2016/12/21 Javascript
Node.js操作redis实现添加查询功能
2017/05/25 Javascript
微信小程序日历组件calendar详解及实例
2017/06/08 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
Vue2.x通用条件搜索组件的封装及应用详解
2019/05/28 Javascript
webgl实现物体描边效果的方法介绍
2019/11/27 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
Python cookbook(数据结构与算法)实现查找两个字典相同点的方法
2018/02/18 Python
基于Pandas读取csv文件Error的总结
2018/06/15 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
Python函数式编程指南:对生成器全面讲解
2019/11/19 Python
Python如何解除一个装饰器
2020/08/07 Python
Python通过getattr函数获取对象的属性值
2020/10/16 Python
python 生成正态分布数据,并绘图和解析
2020/12/21 Python
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
融资租赁计划书
2014/04/29 职场文书
2014年最新个人对照检查材料范文
2014/09/25 职场文书
保险公司增员口号
2015/12/25 职场文书
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL
详解Spring Security中的HttpBasic登录验证模式
2022/03/17 Java/Android
GO中sync包自由控制并发示例详解
2022/08/05 Golang