使用 photo-sphere-viewer.js 浏览单张和六张的全景图

photo-sphere-viewer.js是一个用于显示照片球面全景图的JavaScript库，是一个基于three.js的全景插件。
示例
http://ithanmang.com/taskdata/photo-sphere-viewer/index.html
效果

特点
1、能添加锚点
2、可以调用陀螺仪
3、可以加载单张和六张的全景图
4、功能丰富，使用简单

调用陀螺仪需要引用 DeviceOrientationControls.js 这是three.js的一个js插件

需要依赖的文件

three.js
doT.js
uEvent.js
D.js

使用步骤
引入下面文件

<link rel="stylesheet" href="css/photo-sphere-viewer.css">
<script src="libs/three.js"></script>
<script src="libs/D.js"></script>
<script src="libs/uevent.js"></script>
<script src="libs/doT.js"></script>
<script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 -->
<script src="libs/photo-sphere-viewer.js"></script>

创建一个div

<!-- 全景图 -->
<div id="photo-sphere"><div id="viewer"></div>
</div>

调用PhotoSphereViewer方法

<script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'path/to/panorama.jpg',size:{width:'100%',height:'100%'}});
</script>

写下面这些代码就可以加载全景图

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>body {margin: 0;padding: 0;}#photo-sphere {width: 80%;height: 500px;margin: 100px auto;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);}</style><link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script>
</head>
<body>
<!-- 全景图 -->
<div id="photo-sphere"><div id="viewer"></div>
</div>
<script>var viewer = new PhotoSphereViewer({container: 'viewer',panorama: 'images/Bryce-Canyon.jpg',size:{width:'100%',height:'100%'}});</script>
</body>
</html>

具体功能可以查看官方文档：
https://photo-sphere-viewer.js.org/api/
示例代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="yes" name="apple-touch-fullscreen"><title>Title</title><style>body {margin: 0;padding: 0;}#photo-sphere {width: 100%;height: 500px;margin: 0 auto;box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);}</style><link rel="stylesheet" href="css/photo-sphere-viewer.css"><script src="libs/three.js"></script><script src="libs/D.js"></script><script src="libs/uevent.js"></script><script src="libs/doT.js"></script><script src="libs/DeviceOrientationControls.js"></script><!-- 使用陀螺仪加入此js库文件 --><script src="libs/photo-sphere-viewer.js"></script></head>
<body>
<!-- 全景图 -->
<div id="photo-sphere"><div id="viewer"></div>
</div>
<script>var config = [{url:{left: 'images/siximg/left.jpg',front: 'images/siximg/front.jpg',right: 'images/siximg/right.jpg',back: 'images/siximg/back.jpg',top: 'images/siximg/top.jpg',bottom: 'images/siximg/bottom.jpg',},desc:'太阳神庙 ( 虚幻 4 )'}];var PSV = PhotoSphereViewer({container:'viewer', // 直接写 id 值// panorama:'images/Bryce-Canyon.jpg',panorama:config[0].url,caption:config[0].desc,default_long: Math.PI / 2,default_fov: 90,size:{width:'100%',height:isMobile()? screen.availHeight : '100%',},loading_msg:'images/photosphere-logo.gif',time_anim:false,markers:[{id:'image',image:'images/pin2.png',width:35,height:35,longitude: 100,latitude: 0,anchor:'bottom center',tooltip:'雕像',},{id:'image2',image:'images/pin1.png',width:35,height:35,longitude: 20,latitude: -0.15,anchor:'bottom center',tooltip:'灯',}]});/* 判断设备是否为移动端 */function isMobile() {var ua = navigator.userAgent;var ipad = ua.match(/(iPad).*OS\s([\d_]+)/),isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/),isAndroid = ua.match(/(Android)\s+([\d.]+)/),isMobile = isIphone || isAndroid;return isMobile;}if (!isMobile()) {document.getElementById('photo-sphere').style.marginTop = '100px';document.getElementById('photo-sphere').style.marginBottom = '100px';document.getElementById('photo-sphere').style.marginLeft = 'auto';document.getElementById('photo-sphere').style.marginRight = 'auto';document.getElementById('photo-sphere').style.width = '80%';}
</script></body>
</html>

使用 photo-sphere-viewer.js 浏览单张和六张的全景图相关推荐

Photo Sphere Viewer 全景图
Photo Sphere Viewer 一款基于 three.js 的简易3D插件,方便,实用,友好,看到网上有些API有错误,所以自己写一个修正版的该js插件可以360度旋转查看全景图,也可以上 ...
Photo Sphere Viewer渲染全景图片
下载官方网站: ---- https://photo-sphere-viewer.js.org 附属依赖必选项: ---- three.js ---- browser.js 注: 可以直接使用 np ...
vue与单页面使用Photo Sphere Viewer创建vr 360全景示例代码
图片资料来源于:http://resource.haorooms.com/uploads/demo/media/3Dqj/index.html 因本人注册账号下载参考之后再到vue项目中,若有侵权请 ...
开源全景插件 Photo Sphere Viewer
概述日常中,我们比较常见的是街区全景,百度通过街景车采集街景数据,最后形成全景应用,百度的全景还拥有一定的交互功能,可以随着街道移动街景,作为个人开发者,有一些开源库能够满足我们对全景的应用与探索. ...
Photo Sphere Viewer
Photo Sphere Viewer photo-sphere-viewer中文文档_陈坚泓的博客-CSDN博客_photo-sphere-viewer
全景效果图html5,HTML5+JS实现可交互360°柱状全景图浏览
以前写文章总喜欢把自己折腾的过程和思路都写出来不知道为什么懒,现在都喜欢直接上干货了,大概是为了节约大家的时间吧看标题是不是以为我要手动canvas秒天秒地?别瞎想了就我这样的菜逼只有调库的份 ...
全景效果实现（Photo Sphere，photo-sphere-viewer全景虚拟漫游）
简述:全景效果我们都知道,常用于虚拟场景体验,具体怎么实现,这里给大家推荐一款组件,便于实现全景的真实效果,Photo Sphere: 使用详细: 1.下载依赖: npm install photo- ...
Viewer.js 图片预览插件
一.简介 Viewer.js 是一款强大的图片查看器. Viewer.js 有以下特点: 支持移动设备触摸事件支持响应式支持放大/缩小支持旋转(类似微博的图片旋转) 支持水平/垂直翻转支持图片 ...
viewer.js插件的应用
需求:商品列表中图片点击放大. 实现方法:使用viewer.js插件,实现点击图片图片放大做法: 1.下载viewer.js插件 2.页面上引入相关的插件 <link rel="st ...

使用 photo-sphere-viewer.js 浏览单张和六张的全景图

使用 photo-sphere-viewer.js 浏览单张和六张的全景图相关推荐

最新文章

热门文章