小程序h5 实现全景图播放功能(如vr看房)_小程序 如何实现全景图叠加图片 视频

以vue项目为例

插件官网地址 https://photo-sphere-viewer.js.org

具体功能配置请参考官网api

项目目录结构

1.安装以依赖

cnpm install three -S
cnpm install photo-sphere-viewer -S

b.jpg(全景图片)

 quanjing.vue

<template>
    <div>
        <div
            id="viewer"
            ref="viewer"
        ></div>
    </div>
</template>
 
<script>
var THREE = require("three");
import { Viewer } from 'photo-sphere-viewer';
import "photo-sphere-viewer/dist/photo-sphere-viewer.css";
export default {
    name: "quanjing",
    data() {
        return {
            factoryLink: require("@/assets/b.jpg"),
        };
    },
    watch: {},
    mounted() {
        console.log(THREE);
        console.log(Viewer);
 
            this.init();
            //     if (this.PSV) {
            //         this.imageLoaded = false;
            //         console.log(this.imageLoaded);
            //         this.PSV.setPanorama(this.factoryLink, true, true).then(() => {
            //             this.imageLoaded = true;
            //             console.log("-------替换图片完成--------");
            //         });
            //     } else {
            //         this.initPhotoSphere();
            //     }
    },
    methods: {
        init() {
            const that = this;
            //获取微信小程序传过来的全景图地址
            var param = getParamer();
            //获取并处理小程序传递过来的参数
            function getParamer() {
                var url = window.location.href.split(
                    "?"
                )[1]; /*获取url里"?"后面的值*/
                if (url) {
                    /*判断是否是一个参数还是多个参数*/
                    url = url.split("=");
                    return url[1]; /*返回想要的参数值*/
                } else {
                    return "";
                }
            }
            this.PSV = new Viewer({
                container: document.querySelector('#viewer'),
                panorama: param ? param : that.factoryLink, //这里放全景图地址
                caption: '厂区鸟瞰图',
                navbar: [
                    "autorotate",
                    "zoom",
                    "caption",
                    "fullscreen"
                ],
            });
        },
    }
};
</script>
 
<style scoped>
#viewer {
    width: 100vw;
    height: 50vh;
  }
</style>