小程序/Html5/Vue实现全景图播放功能

最新推荐文章于 2024-03-21 13:56:03 发布

冯不疯先生

最新推荐文章于 2024-03-21 13:56:03 发布

阅读量3.3k

点赞数 3

分类专栏： vue 微信小程序文章标签： vue.js 小程序 javascript

本文链接：https://blog.csdn.net/qq_58437833/article/details/120421156

版权

微信小程序同时被 2 个专栏收录

10 篇文章 0 订阅

订阅专栏

vue

2 篇文章 0 订阅

订阅专栏

方案一：使用小程序全景图插件

方案二：Html5全景图

方案三：Vue组件展示全景图，适用Vue项目（H5，PC都可以）

小程序/Html5/Vue 实现全景图播放功能

三种方案，分别适用小程序项目 H5项目 Vue项目，请根据项目场景选择合适方案展示全景图

方案一：使用小程序全景图插件

注意事项：建议插件使用2.0.3版本，全景图分辨率控制在2048*1024

文档地址：

wxPano | 小程序插件 | 微信公众平台 (qq.com)

方案二：Html5全景图

适用场景：兼容移动端和PC端,也可以用于小程序外链H5全景图
引用的关键资源：three.min.js和photo-sphere-viewer.min.js
Demo可在我的github下载：https://github.com/Summer-Lola/Panorama

Demo使用须知：
运行环境：要放在PHP环境或node环境才能运行，
比如可以把demo里面的文件复制粘贴到vue项目中访问

Html5全景图h5.html代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全景图</title>
    <script src="./three.min.js"></script>
    <script src="./photo-sphere-viewer.min.js"></script>
    <style>
        html,
        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }
        
        #container {
            width: 100%;
            height: 100%;
        }
    </style>
</head>

<body>
    <div id="container"></div>
</body>
<script>
    //获取微信小程序传过来的全景图地址
    var param = getParamer()
    console.log('--param--', param)
        //获取并处理小程序传递过来的参数
    function getParamer() {
        var url = window.location.href.split("?")[1]; /*获取url里"?"后面的值*/
        if (url) { /*判断是否是一个参数还是多个参数*/
            url = url.split("=")
            return url[1]; /*返回想要的参数值*/
        } else {
            return '';
        }
    }

    var PSV = new PhotoSphereViewer({
        // Path to the panorama
        panorama: param ? param : 'b.jpg', //这里放全景图地址

        // Container
        container: 'container'
    });
</script>

</html>

如果是微信小程序端使用还需要在传个全景图地址给html5页面：
wxml代码:

<!--pages/panoramDetail/index.wxml-->
<view class="page" style='margin-top: {{height}}px'>
	<web-view src="{{url}}"></web-view>
</view>

JS代码：

// pages / panoramView / index.js
var app = getApp();
Page({
  data: {
    height: app.globalData.height * 2 + 20,
    url: '', //跳转的H5全景图地址
    panoramaUrl: '', //全景图地址
    panoramaCode: '', //全景图Code
    token: wx.getStorageSync('token')
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //url：你要跳转的Html5全景图页面地址
    // var url = 'https://ldz.csheidou.com/h5_view/h5.html'
    var url = 'http://192.168.8.93:8080/h5.html'
    this.setData({
      panoramaUrl: options.panoramaUrl,
      panoramaCode: options.panoramaCode,
      url: url + '?panoramaUrl=' + decodeURIComponent(options.panoramaUrl)
    })

  },

})

方案三：Vue组件展示全景图，适用Vue项目（H5，PC都可以）

第一步：安装依赖

npm install three --save
npm install photo-sphere-viewer --save

确保依赖在package.json 文件如下位置

第二步：全局挂载 PhotoSphereViewer

import 'photo-sphere-viewer/dist/photo-sphere-viewer.css' // 全景图样式
import PhotoSphereViewer from 'photo-sphere-viewer' // 全景图插件

Vue.prototype.$PhotoSphereViewer = PhotoSphereViewer // 引入全景图

在这里插入图片描述

第三步：vue组件中使用PhotoSphereViewer展示全景图

 <template>
  <div class="inspection">
    <div class="detail-header">
      <img @click="handleGoBack" class="left" src="../../assets/left.png" alt="">
      <span>全景图</span>
    </div>

    <!-- 全景图容器 -->
    <div id="inner-quanjing" style="position:relative;top:10rem;width:100%;height:100%"></div>
  </div>
</template>
<script>

export default {
  data () {
    return {
      PSV: null, // 全景图对象
      imgReturn: false, // 查看照片弹窗是否显示
      dialogVisible: false, // 是否显示全景图弹窗
      superiorPanoramaCode: '', // 上级全景图编码
      detailList: {},
      panoramaUrl: require('../../assets/b.jpg')
    }
  },

  mounted () {
    this.$nextTick(() => { this.initPhotoSphere() })
  },
  methods: {
    // 全景图初始化
    initPhotoSphere () {
      var panoramaUrl = this.panoramaUrl
      document.getElementById('inner-quanjing').innerHTML = ''
      this.PSV = null
      this.PSV = new this.$PhotoSphereViewer({
        panorama: panoramaUrl, // 全景图地址
        container: document.getElementById('inner-quanjing'), // 全景图的容器
        size: { width: '100%', height: '65vh' }// 全景图容器大小
      })
    },

    handleLinkRouter (val) {
      if (val === 1) {
        this.$router.push('/Inspection')
      }
    },
    handleGoBack () {
      window.history.go(-1)
    }
  }
}
</script>
<style lang='less' scoped>

.detail {
  &-header{
    display: flex;
    justify-content: space-between;
    padding: 0 3.2rem;
    box-sizing: border-box;
    align-items: center;
    width: 100%;
    height: 11.73rem;
    font-size: 4.8rem;
    font-weight: 500;
    background-color: #FCFFFE;
    .left{
      width: 2.8rem;
      height: 5.07rem;
    }
  }
  &-content{
    color: #333;
    &-item{
      width: 100%;
      height: 10.8rem;
      font-size: 3.73rem;
      display: flex;
      justify-content: space-between;
      padding: 0 3.2rem;
      box-sizing: border-box;
      align-items: center;
      border-bottom: .5px solid #F0F2FC;
      .item-val{
        color: #666;
      }
    }
  }
}

</style>

效果图：

在这里插入图片描述

冯不疯先生

关注

3
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
小程序/Html5/Vue实现全景图播放功能

目录方案一：使用小程序全景图插件方案二：Html5全景图方案三：Vue组件展示全景图，适用Vue项目（H5，PC都可以）小程序/Html5/Vue 实现全景图播放功能三种方案，分别适用小程序项目 H5项目 Vue项目，请根据项目场景选择合适方案展示全景图方案一：使用小程序全景图插件注意事项：建议插件使用2.0.3版本，全景图分辨率控制在2048*1024文档地址：https://mp.weixin.qq.com/wxopen/plugindevdocappid=wx38
复制链接

扫一扫