全景图Photo Sphere Viewer插件在HTML中的基础使用

Alexcoding_

已于 2022-04-24 17:40:49 修改

阅读量1.8k

点赞数 2

文章标签：前端 javascript

于 2022-04-24 17:33:05 首次发布

本文链接：https://blog.csdn.net/weixin_48598760/article/details/124387649

版权

本文介绍了如何使用photo-sphere-viewer插件在项目中实现3D全景图的拖拽查看、放大缩小以及点位标记功能。详细展示了通过引入在线文件和下载本地资源两种方式配置插件，并提供了示例代码和方法封装。此外，还分享了如何添加和响应点击标记点的回调函数。

摘要由CSDN通过智能技术生成

背景

在公司项目开发中用到了这个插件，先记录下来使用方法，方便回顾

插件全英官网 photo-sphere-viewer.js.org/

功能说明

该插件实现了3D图 拖拽查看、放大缩小、点位标记

拖拽查看

放大缩小

点位标记

插件介绍及使用方式

photo-sphere-viewer 插件，它基于three.js和uEvent 2实现

引入在线文件直接实现(基本页面)

通过引入Photo Sphere Viewer的在线css样式，JS依赖，实现全景图的基本操作，可直接复制到HTML中使用

代码如下：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 在线CSS样式 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.css"/>
</head>
    <!-- 在线JS -->
<script src="https://cdn.jsdelivr.net/npm/three/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uevent@2/browser.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photo-sphere-viewer@4/dist/photo-sphere-viewer.min.js"></script>

    <!-- 挂载的DOM元素必须有明确的宽高 -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>

<script>
  const viewer = new PhotoSphereViewer.Viewer({
    container: document.querySelector('#viewer'),  //挂载的DOM元素
    panorama: 'path/to/panorama.jpg',              //全景图路径
  });
</script>

下载插件至本地实现（含JS方法）

通过下载Photo Sphere Viewer的CSS样式以及JS依赖，并引入到HTML中使用

CSS样式JS依赖下载地址：http://47.97.66.144:8080/PhotoSphereViewer/doc.zip

（复制到浏览器下载）

HTML页面

<head>
    <meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
        <title>tittle</title>
        <!-- 下载至本地的CSS样式 -->
        <link rel="stylesheet" type="text/css" href="css/photo-sphere-viewer.min.css" />
</head>
	<!-- 下载至本地的JS -->
	<script src="js/jquery-1.7.2.js"></script>
	<script src="js/three.min.js"></script>
	<script src="js/D.min.js"></script>
	<script src="js/doT.min.js"></script>
	<script src="js/uevent.min.js"></script>
	<script src="js/photo-sphere-viewer.js"></script>
<body>
        <!-- 全景图 -->
        <div id="photo-sphere">
               <div id="viewer"></div>
        </div>
               <style>
                    html,
                    body {
                            height: 100%;
                            margin: 0;
                            padding: 0;
                    }

                    #photo-sphere {
                            position: absolute;
                            width: 100%;
                            height: 100%;
                            margin: 0 auto;
                            box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);

                    }
                </style>
         <!-- 调用封装的全景图方法JS -->      
         <script src="js/(自定义名字).js"></script>
	</body>
</html>

封装的全景图方法JS

//设置标记点信息
var MARKERS = [{		
       id: 1,
       image: 'img/index/marker.png', //标记点的图标样式，可以自己更改
       width: 35,
       height: 35,
       longitude: 0.548882760744928,
       latitude: -0.36324690389825065,
       tooltip: '标记点一',
}, ]

//延时执行3D图函数，保证图片等加载完毕
setTimeout("viewer()", 600);  

//封装3D图函数
function viewer() {	

       //设置3D图信息
       var PSV = PhotoSphereViewer({  
               container: 'viewer',                  //挂载的Dom ID
               panorama: 'img/index/pingwu.jpg',     //3D图路径
               navbar: false,                        //显示导航栏
               time_anim: false,                     //播放动画延时
               anim_speed: '1rpm',                   //旋转速度 默认2rpm
               default_fov: 90,                      //默认视野
               default_long: 0.548882760744928,      //初始化角度
               default_lat: -0.36324690389825065,    //初始化角度
               size: {                               //3D图大小
                       width: '100%',
                       height: '100%',
               },
               markers: MARKERS,                     //标记点信息

       });

       //点击全景图执行的回调函数
       PSV.on('click', function() {  

       })

       // 点击图片显示标记点，控制台打印标记点的longitude，latitude点位，方便调试以及点位新增操作
       var i = 0;
       PSV.on('click', function(e) {
               i++;
               var lon = e.longitude;
               var lat = e.latitude;
               console.log(lon, lat);
               PSV.addMarker({
                       id: i,
                       image: 'img/index/marker.png',
                       width: 30,
                       height: 30,
                       longitude: lon,
                       latitude: lat,
                       anchor: 'bottom center',
                       tooltip: '灯'
               })
       });

       //点击标记点执行的回调
       PSV.on('select-marker', function(marker) { 



       });
       }

结语

该文只提到了Photo Sphere Viewer插件的基本功能使用，还有更多的方法在官网上，等这阵忙完了再去研究，感兴趣的小伙伴可以去了解下，官网在文首。

Alexcoding_

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
全景图Photo Sphere Viewer插件在HTML中的基础使用

目录背景功能说明拖拽查看放大缩小点位标记插件介绍及使用方式引入在线文件直接实现(基本页面)下载插件至本地实现（含JS方法）结语背景在公司项目开发中用到了这个插件，先记录下来使用方法，方便回顾插件全英官网photo-sphere-viewer.js.org/功能说明该插件实现了3D图拖拽查看、放大缩小、点位标记拖拽查看放大缩小点位标记插件介绍及使用方式photo-sphere-viewer 插件，它基于thre..
复制链接

扫一扫