最近项目中要求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>示例图片：
571
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
