最近项目中要求vr功能，可以进行图片的全景查看，在此，用到了vue里的一个实现全景预览的插件：photo-sphere-viewer.js。这些插件，在uniapp中不能直接用。不过uniapp有个组件web-view，可以引入内部或外部的HTML。
首先写一个html，在html中引入三个js文件
<script src="./js/three.min.js"></script>
<script src="./js/browser.min.js"></script>
<script src="./js/photo-sphere-viewer.min.js"></script>在<body>中放一个div
<!-- 全景图 -->
<div id="viewer" style="width: 100vw; height: 100vh;"></div>在js中new一个PhotoSphereViewer对象
<script>
var panos = [
{
url: 'http://5664213.cn/attachs/photo/201511/20151120_244587E7732518CCD3866D6ECB79F9B0.png',
desc: '全景一'
}
]
const baseUrl = 'https://photo-sphere-viewer-data.netlify.app/assets/';
const viewer = new PhotoSphereViewer.Viewer({
container: 'viewer', // 包含全景图或元素的标识符 也可container: document.querySelector('.viewer')
panorama: panos[0].url, // 全景图片路径
caption: panos[0].desc, // 导航栏中显示的文本
loadingImg: baseUrl + 'loader.gif',
// description:'测试VR', // 当用户单击“i”按钮时，侧面板中显示的文本。允许使用 HTML
autorotateIdle: true, // 用户处于空闲状态，则重新启动自动旋转
autorotateDelay: 1000, // 延迟1秒之后自动旋转
});
</script>接下来就是在uniapp项目中引入，阅读web-view文档
本地资源文件是不能随意乱放的，有固定的存放路径
<template>
<view class="contain">
<web-view src="../../../hybrid/html/index.html"></web-view>
</view>
</template>示例图片：文章来源：https://www.toymoban.com/news/detail-502625.html
文章来源地址https://www.toymoban.com/news/detail-502625.html
到了这里，关于uniapp中使用photo-sphere-viewer.js实现全景VR图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
