基于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 相关文章推荐
初学prototype,发个JS接受URL参数的代码
Sep 25 Javascript
JS 文件大小判断的实现代码
Apr 07 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
PhotoShop给图片自动添加边框及EXIF信息的JS脚本
Feb 15 Javascript
使用AOP改善javascript代码
May 01 Javascript
javascript动态创建表格及添加数据实例详解
May 13 Javascript
在Javascript中处理字符串之big()方法的使用
Jun 08 Javascript
jQuery选择器用法实例详解
Dec 17 Javascript
学习Javascript面向对象编程之封装
Feb 23 Javascript
js代码实现下拉菜单【推荐】
Dec 15 Javascript
详解js的异步编程技术的方法
Feb 09 Javascript
js实现自定义滚动条的示例
Oct 27 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
福利彩票幸运号码自动生成器
2006/10/09 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
js实现连续英文字符自动换行兼容ie6 ie7和firefox
2013/09/06 Javascript
js 浏览本地文件夹系统示例代码
2013/10/24 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
2014/06/11 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
Vue 2.x教程之基础API
2017/03/06 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
vue单页面实现当前页面刷新或跳转时提示保存
2018/11/02 Javascript
react写一个select组件的实现代码
2019/04/03 Javascript
vue移动端的左右滑动事件详解
2020/06/17 Javascript
[36:05]DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs Optic
2018/04/01 DOTA
Python创建文件和追加文件内容实例
2014/10/21 Python
python统计文本文件内单词数量的方法
2015/05/30 Python
Python通过select实现异步IO的方法
2015/06/04 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
Python标准库shutil用法实例详解
2018/08/13 Python
Django对models里的objects的使用详解
2019/08/17 Python
Python中关于浮点数的冷知识
2019/09/22 Python
PYTHON如何读取和写入EXCEL里面的数据
2019/10/28 Python
Python笔记之观察者模式
2019/11/20 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
Python描述符descriptor使用原理解析
2020/03/21 Python
基于python连接oracle导并出数据文件
2020/04/28 Python
Sneaker Studio波兰:购买运动鞋
2018/04/28 全球购物
实验心得体会
2014/09/05 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
介绍信的格式
2015/01/30 职场文书
高中运动会前导词
2015/07/20 职场文书
《去年的树》教学反思
2016/02/18 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
解决SpringBoot文件上传临时目录找不到的问题
2021/07/01 Java/Android
解决Mysql报错 Table 'mysql.user' doesn't exist
2022/05/06 MySQL
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android