基于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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
Jul 17 Javascript
使用jquery.form.js实现图片上传的方法
May 05 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
Bootstrap零基础入门教程(二)
Jul 18 Javascript
JS和JQuery实现雪花飘落效果
Nov 30 jQuery
mac上配置Android环境变量的方法
Jul 08 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
SpringBoot在yml配置文件中配置druid的操作
Nov 16 Javascript
vuex的使用步骤
Jan 06 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
Smarty中调用FCKeditor的方法
2014/10/27 PHP
PHP实现全角字符转为半角方法汇总
2015/07/09 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
jquery统计复选框选中示例
2013/11/05 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
javascript自动生成包含数字与字符的随机字符串
2015/02/09 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
跟我学习javascript的prototype使用注意事项
2015/11/17 Javascript
js实现上传图片及时预览
2016/05/07 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
2016/08/18 Javascript
微信小程序 Audio API详解及实例代码
2016/09/30 Javascript
Javascript动画效果(3)
2016/10/11 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
js实现3D图片环展示效果
2017/03/09 Javascript
Vue生命周期示例详解
2017/04/12 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
VUE table表格动态添加一列数据,新增的这些数据不可以编辑(v-model绑定的数据不能实时更新)
2020/04/03 Javascript
[28:28]Ti4 冒泡赛第二天NEWBEE vs NaVi 2
2014/07/15 DOTA
python if not in 多条件判断代码
2016/09/21 Python
python+opencv实现霍夫变换检测直线
2020/10/23 Python
简述 Python 的类和对象
2020/08/21 Python
python实现跨年表白神器--你值得拥有
2021/01/04 Python
请问如下代码执行后a和b的值分别是什么
2016/05/05 面试题
医院总经理职责
2013/12/26 职场文书
小学生安全保证书
2014/02/01 职场文书
秦兵马俑教学反思
2014/02/07 职场文书
小学老师寄语大全
2014/04/04 职场文书
企业安全生产演讲稿
2014/05/09 职场文书
司法建议书范文
2014/05/13 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
PHP实现考试倒计时功能代码
2021/04/16 PHP
用Python selenium实现淘宝抢单机器人
2021/06/18 Python
Win10多屏显示如何设置?Win10电脑多屏显示设置操作方法
2022/07/07 数码科技